3

有人可以解释style对象是什么吗？它是 HTML DOM 属性还是 JavaScript 对象？以及它与以下内容有何关系：

  • HTML
  • CSS
  • DOM
  • JavaScript

然后你能不能对内联 HTML 属性做同样的事情style，还要告诉我这个属性与onclick. 预先感谢您的帮助。

4

4 回答 4

4

在这个例子中，

<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”本质上只是文本，直到您的浏览器对其进行处理。

于 2013-06-08T04:58:08.980 回答
2

如果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 方法。这里简单测试。

于 2013-06-08T11:13:44.660 回答
1

该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

于 2013-06-08T03:45:18.177 回答
1

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

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

于 2013-06-08T03:50:57.333 回答