样式对象和HTML属性

The style object and HTML attibute

本文关键字：属性 HTML 对象 样式      更新时间：2023-09-26

谁能解释一下style对象是什么?它是HTML DOM属性还是JavaScript对象?它与:

有什么关系?
  • CSS
    • DOM
    • JavaScript

然后你可以对内联HTML style属性做同样的事情，但也告诉我这个属性如何与onclick这样的事件属性进行比较。提前感谢您的帮助。

在本例中，

<span id="myspan" style="color:red">some red text</span>

style是HTML属性。取值为CSS。你可以通过JavaScript访问它，首先检索HtmlElement对象，

var myspan = document.getElementById('myspan');

然后访问style 属性，

myspan.style

这是一个JavaScript对象，它有自己的一组属性，如color。

"DOM"本质上是HTML被浏览器处理成树状结构后的名称。它可以呈现到屏幕上，也可以通过JavaScript进行操作。"HTML"本质上只是文本，直到你的浏览器处理它。

如果HTML元素包含带有样式声明的内联style属性，例如

<div style="color:red; background-color:white;" id="example"> example text </div>

则这些内联声明将存储在DOM元素的style对象中作为元素的属性:

var element = document.getElementById('example');
alert(element.style.color + element.style.backgroundColor); // 'red white'

这个element.style对象可以方便地调整元素的样式。

引用自Mozilla的网站:"style属性在CSS级联中与通过style属性声明的内联样式具有相同的(并且是最高的)优先级，它对于在特定元素上设置样式很有用。"这意味着:如果浏览器必须在多个声明的样式中选择应该应用于元素的样式，那么内联样式具有比其他选择器更高的优先级，例如

#example { color:blue; }

<div id="example" style="color:red;"> example text </div>

，所以在这个例子中，红色被应用到元素上。

所以在大多数情况下，改变element.style.propertyName也会改变元素在页面上的外观。我所知道的唯一例外是!important压倒规则。例如:

#example { color:blue !important; } /* force color to blue */

<div style="color:red;" id="example"> example text </div>

alert(element.style.color); // alerts 'red', even though the text is forced to blue
alert(window.getComputedStyle(element,null).getPropertyValue('color')); // alerts 'rgb(0,0,255)' ~ blue

(这也是为什么建议慎用!important修饰符的原因。)

回答你剩下的问题:DOM的onclick属性(或HTML的onclick属性)是从旧浏览器遗留下来的，但在许多情况下，它仍然非常有用，你只需要附加一个事件处理程序。为了附加多个事件处理程序，我们可以使用addEventListener DOM方法。这里有一个简单的测试

考虑这个HTML标签:

<input type="text" id="search" />

你可以在JavaScript中访问这个元素:

var search = document.getElementById('search');

现在，你有一个名为search的变量，它是一个对象:

typeof search;
// object
alert(search.constructor.name);
// HTMLInputElement

style属性可用于这些元素。它是一个对象:

search.style;
// CSSStyleDeclaration {parentRule: null, length: 0, cssText: "", alignmentBaseline: "", background: ""…}

当你改变它的属性时，它会影响浏览器中的DOM:

search.style.backgroundColor = 'red';

现在你的文本框将在浏览器中显示为红色。

  • 可以查看jsFiddle Demo
相关文章：