Question

有人可以解释一下style对象是什么吗？它是HTML DOM属性还是JavaScript对象？它与如何相关：

HTML
CSS
DOM
的JavaScript

然后，您可以对内联HTML style属性执行相同操作，还可以告诉我此属性如何与onclick之类的事件属性进行比较。提前感谢您的帮助。

Answer 1

在此示例中，

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

style是 HTML 属性。其值包含 CSS 。您可以通过首先检索HtmlElement对象

，通过 JavaScript 访问它

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

然后访问其style 属性，

myspan.style

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

“DOM”本质上是HTML一旦被浏览器处理成树状结构就赋予HTML的名称。它可以呈现在您的屏幕上，也可以通过JavaScript进行操作。 “HTML”基本上只是文本，直到您的浏览器对其执行某些操作。

Answer 2

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

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

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

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

此element.style对象可用于轻松调整元素的样式。

Quote from Mozilla's website：“样式属性在CSS级联中具有与通过样式属性的内联样式声明相同（和最高）的优先级，它对于在一个特定元素上设置样式很有用。”这意味着：如果浏览器必须在多个声明的样式中选择应该应用于元素的样式，那么inline style has higher priority比其他选择器更好，例如

#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方法。 Simple test here

Answer 3

style对象是HTML DOM的一部分，可以从同名的Javascript对象访问。 onclick是用于操作DOM的事件处理程序。

有关详细信息，请查看此处：http://www.w3schools.com/jsref/dom_obj_style.asp 在这里：http://html.cita.illinois.edu/script/onclick/onclick-example.php

Answer 4

考虑这个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。

样式对象和HTML属性

4 个答案: