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

HTML DOM Style textShadow Thuộc tính


Thuộc tính HTML DOM style textShadow trả về và áp dụng những gì sẽ xảy ra khi luồng văn bản bên ngoài vùng chứa phần tử trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

  • Trả lại textShadow

object.style.textShadow
  • Sửa đổi textShadow

object.style.textShadow = “value”

Giá trị

Ở đây, giá trị có thể là -

Giá trị Giải thích
inherit Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó.
đầu tiên Nó đặt giá trị thuộc tính này thành giá trị mặc định.
không có Nó không tạo bóng trên văn bản.
màu mờ h-shadow v-shadow Nó đặt bóng trên văn bản.
Đây
h-shadow đại diện cho giá trị của bóng ngang.
v-shadow đại diện cho giá trị của bóng dọc.
mờ đại diện cho khoảng cách mờ.
màu đại diện cho màu của bóng.

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính style textShadow -

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   p {
      margin: 1.5rem auto;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
   }
</style>
</head>
<body>
<h1>DOM Style textShadow Property Example</h1>
<p>Some Dummy Text</p>
<button onclick="add()" class="btn">Set textShadow</button>
<script>
   function add() {
      document.querySelector('p').style.textShadow = "10px 10px 2px #db133a";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Style textShadow Thuộc tính

Nhấp vào “ Đặt textShadow ”Để áp dụng bóng trên văn bản đoạn văn.

HTML DOM Style textShadow Thuộc tính