javascript的一些细节

1.obj.getAttribute(“id”) 和 obj.attr 的区别

这两种方法都可用于获取静态HTML元素的属性值，或者获取动态DOM元素中的属性值。

但是如果想要获取的属性是自定义属性，即用户自己为元素定义的一个属性，而非元素所自带的属性。

（自定义属性 ex:此处的colorofbtn就是自定义属性。）

<input id="btn" type="button" value="提交" colorofbtn="red"/>

此时用obj.attr则无法获取赋予的属性，只返回“undefined”

只有obj.getAttribute(“attr”)可以正确取到选定元素的自定义属性

var btn1= document.getElementById("btn");
btn1.getAttribute("colorofbtn");

除了getAttribute(),setAttribute()也是相同的情况，在设置自定义属性时只能通过setAttribute()进行设置。

var btn1= document.getElementById("btn");
btn1.setAttribute("colorofbtn","blue");

2.获取css属性值的方法限制

众所周知，CSS样式有三种，分别是行内样式、内部样式和外部样式。

内联样式（行内样式）- 在HTML元素中使用"style" 属性

内部样式表（内部样式） -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS

外部引用（外部样式） - 使用外部 CSS 文件
																		//来源：runoob.com

1.obj.style.attr

obj.style.attr只适用于行内样式，即在html元素行内sytle属性中的CSS样式。

2.getComputedStyle

先看一下语句用法：

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

let style = window.getComputedStyle(element, [pseudoElt]);

element（驼峰命名）

用于获取计算样式的 element 。

pseudoElt (可选)

指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。

//好像除了对伪元素之外都可以省略后面这个部分，希望有高手能指点一下，官方文档看不太懂。。。

1.对伪元素的用法

<style>
    h3::after {
        content: "rocks!";
    }
</style>

<h3>generated content</h3>

<script>
    let h3 = document.querySelector('h3'),
    result = getComputedStyle(h3, '::after').content;
    alert(`the generated content is: ${result}`);
    console.log(`the generated content is: ${result}`);
    // the generated content is: "rocks!"
</script>
																	//来源：MDN Web Docs

2.返回值的问题

getComputedStyle的返回值是resolved values对于大多数属性，它是计算值computed value（布局前的值），但对于一些旧属性（包括宽度和高度），它是使用值used value（布局后的值）。

//布局前与布局后的区别是， width 或者 height的百分比可以代表元素的宽度，在布局后会被像素值替换。

补充知识——used value是啥：

CSS 属性的应用值（used value）是完成所有计算后最终使用的值；而计算分三个步骤，先取样式表中权重最高的样式规则，作为指定值（specified value)；继承（如果可继承），或者默认值；再按规范计算出最终值(例如， span 指定 position: absolute 后display 变为 block；尺寸比如 auto 或 百分数 换算为像素值 )， 结果即 应用值used value。

在某些情况下，通过浏览器会特意返回不准确的值。特别是在避免CSS 浏览历史泄露的安全问题，比如，浏览者看过某个网站，它的链接通常会变成蓝色带下划线的链接，通过判断链接的颜色（getComputedSytle(node, null).color) 是否为蓝色，就会泄露用户的浏览历史，所以浏览器会特意返回不准确的值，保护用户隐私。

原文链接：https://blog.csdn.net/qq_53101767/article/details/121317015