Javascript style对象和HTML attibute

有人能解释一下

样式

对象是什么吗？它是HTML DOM属性还是JavaScript对象？它与以下方面有何关系：

• HTML
• CSS
• 多姆
• JavaScript

---

然后，您可以对内联HTML

style

属性执行相同的操作，但也可以告诉我该属性与类似

onclick

的事件属性相比如何。提前感谢您的帮助。

样式对象是HTML DOM的一部分，可以从同名Javascript对象访问

onclick

是一个用于操作DOM的事件处理程序

有关更多信息，请查看此处：

---

这里：

考虑一下这个HTML标记：

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

现在，您有一个名为

search

的变量，它是一个对象：

typeof search;
// object

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

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

style

属性可用于此类元素。 它是一个对象：

typeof search;
// object

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

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

无论何时更改其属性，都会影响浏览器中的DOM：

search.style.backgroundColor = 'red';

现在，浏览器中的文本框将为红色

• 你可以查一下电话号码

在本例中

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

然后访问其

样式

属性

myspan.style

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

color

---

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

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

style

属性

示例文本

然后这些内联声明将作为元素的属性存储在元素的

样式
对象中的DOM：

var-element=document.getElementById（'example'）；
警报（element.style.color+element.style.backgroundColor）；/'红白'

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

：“style属性在CSS级联中具有与通过style属性的内联样式声明相同（且最高）的优先级，可用于在一个特定元素上设置样式。”这意味着：如果浏览器必须在多个声明的样式中选择应应用于一个元素的样式，则不使用其他选择器，例如

#示例{颜色：蓝色；}

示例文本

因此，在这种情况下，红色应用于元素

所以在大多数情况下，更改
element.style.propertyName
也会更改元素在页面上的外观。我所知道的唯一例外是
！重要信息
覆盖规则。例如：

#示例{color:blue！重要；}/*强制将颜色设置为蓝色*/

示例文本

alert（element.style.color）；//警报为“红色”，即使文本强制为蓝色
警报（window.getComputedStyle（元素，null.getPropertyValue（'color'））；//警报“rgb（0,0255）”呈蓝色

（以上也是建议谨慎使用
！important
修饰符的原因。）

回答您的其余问题：DOM的onclick属性（或HTML的onclick属性）是旧浏览器遗留下来的，但在许多只需要附加单个事件处理程序的情况下，它仍然非常有用。对于附加多个事件处理程序，我们可以使用addEventListener DOM方法
 
.style
访问元素样式（JS应该这样做：）元素样式对象具有浏览器检索到的所有元素样式的集合
onclick
是一种将单击处理程序附加到元素的方法。否则，这个问题就相当模糊了。问什么是“风格”
对象”假设存在这样一个对象，但你并没有定义这意味着什么。实际上，你是在要求就一个描述非常模糊的主题进行演讲，而不是提出你所面临的实际问题。以下是我所看到的内容的链接：我仍然有点不清楚style对象是什么。也就是说，在较低的级别上，浏览器是否将此代码作为JavaScript代码查看？它是否必须将
onclick
值发送到JavaScript解释器？因为我认为浏览器必须看到
标记才能调用JavaScript解释器。抱歉说得有点模糊，但我希望得到一些细节，比如@Mark is sharingIt可能是问题所涉及的元素节点的
style
属性–毕竟，它的值是一个对象。但接下来的问题是对象包含什么——它包含在
样式
属性中设置的CSS属性的等价物。因此，如果有一条规则，例如在外部样式表中设置元素的属性，这不会反映在
style
属性中。感谢您的回答！我仍然对浏览器如何处理这段代码感到好奇：
Hi
特别是
this.style.cssText=”color:red；”
浏览器是否将其视为JavaScript代码？它是否必须将
onclick
值发送到JavaScript解释器？因为我认为浏览器必须看到
标记才能调用JavaScript解释器。@Dusty:正如
style
标记包含CSS一样，
onclick
和属性也包含JavaScript。这些属性中的任何代码都是通过JS解释器运行的；不需要
标签。此外，您甚至可以通过
感谢@Mark！！你是我喜欢这个网站的原因！