Question

如何javascript获取css中的样式

Answer 1

使用css控制页面有4种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式。
行内样式(内联样式)即写在html标签中的style属性中，如<div style="width:100px;height:100px;"></div>
内嵌样式即写在style标签中，例如<style type="text/css">div{width:100px; height:100px}</style>
链接式即为用link标签引入css文件，例如<link href="test.css" type="text/css" rel="stylesheet" />
导入式即为用import引入css文件，例如@import url("test.css")

如果想用javascript获取一个元素的样式信息，首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式，如果一个元素的部分样式信息写在内联样式中，一部分写在外部的css文件中，通过style属性是不能获取到元素的完整样式信息的。因此，需要使用元素的计算样式才获取元素的样式信息。

Answer 2

方式一：

//找到dom对象使用style属性
alert(document.getElementById('元素id').style.color);//取颜色
alert(document.getElementById('元素id').style.fontSize);//取字体大小

所有-分割的样式名字，都去掉-该大小写譬如 font-size=>fontSize

这个方式有弊端，通常只能获取到行内样式,所谓行内样式就是写在元素上的style属性

如下：

<a href="#" style='color:red;,font-size:15px;'>这是个a标签</a>

方式二：

//用jQuery获取
alert($('#元素id').css('color'));
alert($('#元素id').css('fontSize'));//这个靠谱，都能获取到

Answer 3

首先我不明白你说CSS样式是指哪里的CSS样式,
其次我个人理解你的意思应该是获取某个标签的css属性,在javascript中可以通过document对象对某个具体的标签对象做相应的行为.
js动态修改标签的css内容语法：
获取css属性：obj.style.属性，使用var接收即可
赋值css属性：obj.style.属性 = 赋值，直接赋值即可

如果需要获取的属性有单位，比如px，那么接收过来的值就是带有px的字符串。如果需要转换成number类型，使用parseInt()方法 如果css的属性：由多个单词用-链接，那么在使用js获取属性，将-去掉。

Answer 4

Vue实践-CSS样式position/display/float属性对比使用