获取样式
4种样式的写法
为什么先要说这个，因为它决定了获取样式的方式
第一种：行内样式（内联样式）
写在标签的style属性中
<div style="color:#f00"></div>
第二种：内嵌式
写在< head >标签中，放在< style >标签里面
<head>
<style></style>
</head>
第三种：链接式
写在< head >标签中，放在< link >标签的href属性中放入外部css文件
<head>
<link rel="stylesheet" href="文件名/地址">
</head>
第四种：导入式
这种方式有兼容性的问题，IE5以上才能识别。同时，它会等到页面全部被下载完再下载，对于页面的效果而言并不理想。尤其是网速比较慢的时候。
同时@import不是dom标签可以控制的，也就是说这种方式引入的CSS文件，必须保证里面的样式在后期不会访问。
当然，它也是有好的地方的。我们可以建一个主样式表，然后在其中引入其他样式表。这样比较有利于修改和扩展。
它有两种使用方式
1、在界面的style标签中导入
<style>
@import url("文件名/地址");
</style>
2、在外部css文件中
必须要在样式定义之前使用；
首先在html文件的头部用< link >标签引入一个css文件
然后再在该css文件中使用@import url(“文件名/地址”);引入外部css文件
获取样式的方式
在说这个前，我们要将4种获取样式的方式分个类。
首先，行内样式为一类
然后，内嵌式和链接式分一类
最后，导入式为一类，当然它无法获取样式
注意：js只能操作行内样式
行内样式的获取方式
它有三种获取方式
第一种：打点的方式
<div style="background-color: #f00;"></div>
<script>
console.log(document.getElementsByTagName("div")[0].style.backgroundColor)
// 驼峰式命名
// rgb(255, 0, 0)
</script>
第二种：属性名的方式
<div style="background-color: #f00;"></div>
<script>
console.log(document.getElementsByTagName("div")[0].style[0])
// 类数组的取值方式
// background-color
</script>
注意：它只能拿到样式的名称，比较鸡肋。
内嵌式和链接式的获取方式
使用getComputedStyle与currentStyle属性获取样式
getComputedStyle(元素,伪类)
null表示不查找伪类
<style>
#a{
height:100px;
}
</style>
</head>
<body>
<div id="a"></div>
<script>
function getTheStyle(){
var elem = document.getElementById("a");
var css = window.getComputedStyle(elem,null).getPropertyValue("height");
console.log(css);
}
getTheStyle();//100px;
</script>
</body>
同时，它也可以获取伪类中的样式
<style>
h3::after {
content: ' rocks!';
}
</style>
<h3>generated content</h3>
<script>
var h3 = document.querySelector('h3');
var result = getComputedStyle(h3, ':after').content;
console.log(result); // rocks!
</script>
2060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
