HTML - DOM style 属性

HTML DOM 的style 属性用于获取直接为特定元素设置的 CSS 样式。

它可以访问该特定元素的内联 CSS 属性，不包括 <head> 部分或任何外部样式表中的样式。

语法

以下是 HTML DOM 的style（设置样式）属性的语法：

element.style.propertyName = value;

其中，“value”是您想要应用于特定元素 CSS 属性的新值。

要获取已使用的样式属性，请使用以下语法：

element.style.propertyName;

参数

此属性不接受任何参数。

返回值

style 属性返回一个对象，该对象包含应用于特定元素的内联 CSS 样式。

示例 1：将内联样式应用于段落元素

下面的程序演示了如何使用 HTML DOM 的style 属性将样式应用于段落 (<p>) 元素：

<!DOCTYPE html>
<html lang="en">
<head> 
<style> 
   .highlighted {
     background-color: lightblue;
     padding: 10px;
     border: 1px solid blue;
   }
   button{
       padding: 8px 10px;
   }
</style>
</head>
<body>
<p id="myPara">Click the below button to change my style!</p>
<button onclick="changeStyle()">Change Style</button>
<script>
   function changeStyle() {
      // Get the paragraph element
      let para = document.getElementById('myPara');
      
      // Apply new styles using the style property
      para.style.backgroundColor ='green';
      para.style.color = 'white';
      para.style.fontWeight = 'bold';
      para.style.padding = '15px';
      para.innerHTML = 'Style Changed!';
   }
</script>
</body>
</html>

上面的程序在单击按钮时将样式添加到段落 (“p”) 元素。

示例 2：每次单击时更改段落的颜色

以下是 HTML DOM style 属性的另一个示例。我们使用此属性在单击按钮时更新段落 (“p”) 元素的文本颜色：

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   #colorfulText {
     font-size: 24px;
     font-weight: bold;
     margin-top: 20px;
   }
   button{
       padding: 8px 10px;
   }
</style>
</head>
<body>
<p>Click the below to update the style..</p>
<p id="colorfulText">Click the button to see colorful text!</p>
<button onclick="changeColor()">Generate Colorful Text</button>
<script>
   function changeColor() {
      let t=document.getElementById('colorfulText');
      let col= ['red','green','blue','orange','purple'];
      let randomColor = col[Math.floor(Math.random() * col.length)];
      t.style.color = randomColor;
      t.innerHTML = `Colorful Text in ${randomColor.toUpperCase()}`;
   }
</script>
</body>
</html>

上面的程序每次单击按钮时都会向段落添加新的颜色。

示例 3：将高亮效果应用于按钮元素

在下面的示例中，DOM style 属性用于通过在单击时将高亮效果应用于按钮来更改元素的外观：

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   button{
       padding: 8px 10px;
       cursor: pointer;
   }
</style>
</head>
<body>
<p>Click the below button to add a highlight effect to it.<p> 
<button id="myButton">Click to Highlight</button>
<script>
   let bn = document.getElementById('myButton');
   //Add event listener to the button
   bn.addEventListener('click', function() {
      // Change the background color using style property
      bn.style.backgroundColor = 'green';
      bn.style.color = 'white';
      bn.style.border = 'none';
      bn.innerHTML = 'Highlighted!';
   });
</script>
</body>
</html>

执行上述程序后，将显示一个按钮，单击该按钮时，将向该按钮添加样式。

支持的浏览器

属性
style	是	是	是	是	是

html_dom_element_reference.htm

打印页面