Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm cách nào để đặt hình ảnh được sử dụng làm đường viền với JavaScript?


Để đặt hình ảnh được sử dụng làm đường viền trong JavaScript, hãy sử dụng borderImageSource để thêm hình ảnh.

Ví dụ

Bạn có thể thử chạy mã sau để tìm hiểu cách làm việc với borderImageSource thuộc tính để đặt hình ảnh làm đường viền -

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color:blue;
            border: 40px dashed;
            border-image: url('https://www.tutorialspoint.com/images/neo4j.png');
            border-image-slice: 50;
            border-image-width: 1 1 1 1;
            border-image-outset: 0;
            border-image-repeat: round;
         }
      </style>
   </head>
   <body>
      <div id="box">
         <p>Demo Text!</p>
      </div>
      <button onclick="display()">Set Inward Offsets</button>
      <script>
         function display() {
            document.getElementById("box").style.borderImageSource = "url('https://www.tutorialspoint.com/images/bugzilla.png')";
         }
      </script>
   </body>
</html>