Table of Contents
回复内容:
Home Web Front-end H5 Tutorial js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别?

js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别?

Jun 07, 2016 am 08:42 AM
AAA alert height style

js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有没有什么区别?

我自己在各种浏览器(IE6到chrome)测试的结果是一样,没发现什么区别

是完全一样吗?
============================
我知道大概区别了,下面第二句在高级浏览器下面查不到信息
不过我想问的是,为什么在IE6/7下第二句也可以成功执行???
是否说在ie6/7下aaa.style和aaa.getAttribute('style')等价???
alert(aaa.style.height);
alert(aaa.getAttribute('style').height);

回复内容:

路过
这是个老问题
现在应该早就不提了吧

懒的再写
贴点儿老图吧
js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别?
js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别?由于写的时间很早,细节上可能有变化
不过大致情况如此
理解下就好了 有区别

首先区分property和attribute,两个翻译成中文都可以作为属性,但是在实际上是有区别的。

在html标签里的属性称为attribute
例如:alaki

这个dom element有3个attribute:href、data-tips、data-original_title

而property是那些它被创建的时候就有的属性,例如attributes, autofocus, className, clientHeight。
特殊的是,假如
alaki
对于这个dom element来说,class不仅是attribute,同时它也是property,但是在dom.element中,只不过它叫className,这两个是绑定的。

简单来说,一些特殊的attribute将会转换为property,脚踏两条船,同样的style也是个脚踏两条船的家伙。

假如是内联样式,通过getAttribute('style')是可以获得的,但只能获取到内联样式部分属性,通过外部样式表或者内嵌样式都是无法获得的,返回值是字符串。

假如不是内联,那么getAttribute('style')返回null或者空字符串,返回哪一个取决于这个浏览器的实现 Element.getAttribute()

上面两种情况,dom.style都将获得完整样式属性,返回值为对象CSSStyleDeclaration

最后一个关于ie6和ie7的问题,
如图
js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别?里面有一句话 :In IE5-7, accessing the style attribute gives an object
DOM Core

在ie5-7里面,getAttribute()的实现是跟dom.style一样的效果的 @alaki 已经说得很好了,我补充下。

elem.style 和 elem.getAttribute('style') 的关系我在这个回答里提到过一点,可以参考一下:webkit内核的浏览器为什么removeAttribute('style')会失效? - 顾轶灵的回答 (里面有些链接好像失效了)

总的来说,style 的内容属性你改成啥就会保留你改后的样子,但是 IDL 属性读时会根据新的内容属性中对应的 CSS 属性来更新,写 IDL 属性时还会重新序列化内容属性以和 IDL 属性保持同步。

举个例子:
HTML:
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"x"</span> <span class="na">style=</span><span class="s">"color: red; aaa: bbb;"</span><span class="nt">></div></span>
Copy after login
怎么可能一样,一个是CSSStyleDeclaration对象,一个是字符串。 Are you kidding?
js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? aaa.style的 style 是dom property, aaa.getAttribute('style') 得到的是html attribute;

html attribute由 html 定义,dom property 由 DOM 定义;
1. 许多 attribute 有与之对应的 property
2. 一些 attribute 没有对应的 property
3. 一些 property 也没有对应的 attribute

比较通用的规则是,html attribute 用于初始化 dom property 的值,之后除非脚本变更,一般不改变,而 dom property则随着用户的交互行为而随之改变,如 input 的 value。

题主的例子不好看出差别,换成 input 的 value 更能看出区别 谢邀。

不等价。碰巧等价也只是因为那是预置固有属性。class(Name)开始就有兼容问题。自定义属性完全行不通。比较可靠的是title这种。style我都怀疑是不是能作为对象用。

实践建议是原生属性一律.xxx,自定义属性一律.getAttribute。后者考虑到兼容性,包括了data-*。

补充:
实测.getAttribute('style')是字符串。
ie7-不支持.setAttribue('style','') IE6/7下 `elem.getAttribute("style")`和`elem.style`返回的都是`CSSStyleDeclaration`对象。
这是个BUG,在IE8之后已经被修复了。
`elem.getAttribute("style")`返回的是元素的style属性上css文本(如果有点话,没有返回null),而`elem.style`返回`CSSStyleDeclaration`。 在Secret Of The JavaScript Ninja 中有详细讲解这两个的区别。 aaa.getAttribute('style')获取的是aaa的内联样式字符串
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to modify element.style How to modify element.style Nov 24, 2023 am 11:15 AM

Methods for element.style to modify elements: 1. Modify the background color of the element; 2. Modify the font size of the element; 3. Modify the border style of the element; 4. Modify the font style of the element; 5. Modify the horizontal alignment of the element. Detailed introduction: 1. Modify the background color of the element, the syntax is "document.getElementById("myElement").style.backgroundColor = "red";"; 2. Modify the font size of the element, etc.

How to implement line break in alert How to implement line break in alert Nov 07, 2023 am 10:19 AM

alert implements line breaks using the br tag.

How to dynamically modify style in react How to dynamically modify style in react Dec 28, 2022 am 10:44 AM

Methods for react to dynamically modify style: 1. Add ref to the element whose style needs to be modified, with syntax such as "<div className='scroll-title clear-fix' ref={ this.manage }>"; 2. Through dynamic control The change of state modifies the style of the element; 3. By using JS code in the DOM, the display and hiding transitions of different DOMs are realized.

What are the new features in Vue3 style and how to use them What are the new features in Vue3 style and how to use them May 14, 2023 pm 10:52 PM

New features of style Vue3.2 version has made many upgrades to the style of single-file components, such as local styles, css variables, and styles exposed to templates. (Learning video sharing: Vue video tutorial) 1. Local style When the label has scoped attribute, its CSS will only be applied to the elements of the current component: hi.example{color:red;} 2. The depth selector is scoped If the selector in the style wants to make a more "deep" selection, that is, affect sub-components, you can use the :deep() pseudo-class: .a:deep(.b){/*...*/ }DOM content created through v-html will not be

Vue error: Unable to use v-bind to bind class and style correctly, how to solve it? Vue error: Unable to use v-bind to bind class and style correctly, how to solve it? Aug 26, 2023 pm 10:58 PM

Vue error: Unable to use v-bind to bind class and style correctly, how to solve it? In Vue development, we often use the v-bind instruction to dynamically bind class and style, but sometimes we may encounter some problems, such as being unable to correctly use v-bind to bind class and style. In this article, I will explain the cause of this problem and provide you with a solution. First, let’s understand the v-bind directive. v-bind is used to bind V

Nintendo Switch 2 rumored to get ports of Assassin\'s Creed Shadows and previous entries in the series Nintendo Switch 2 rumored to get ports of Assassin\'s Creed Shadows and previous entries in the series Aug 14, 2024 pm 12:36 PM

Last week, Paul Gele, a known gaming insider, shared that the upcoming Nintendo Switch 2 will get major third-party AAA ports at launch. This is something to look forward to because the first-gen gaming handheld didn't get any AAA titles at launch. B

Detailed explanation of CSS dimension properties: height and width Detailed explanation of CSS dimension properties: height and width Oct 21, 2023 pm 12:42 PM

Detailed explanation of CSS dimension properties: height and width In front-end development, CSS is a powerful style definition language. Among them, height and width are the two most basic dimension attributes, used to define the height and width of the element. This article will analyze these two properties in detail and provide specific code examples. 1. Height attribute The height attribute is used to define the height of an element. You can use pixel, percentage or

What to do if alert is garbled in javascript What to do if alert is garbled in javascript Feb 10, 2023 am 09:40 AM

Solution to garbled alert code in JavaScript: 1. Add "charset=utf-8"" to the <head> part of HTML; 2. Add "charset="gb2312" or "charset="utf-" to the <script> tag 8""; 3. Change the saving encoding of the js external script to utf8.

See all articles