原生js获取css属性值的问题
来源：5-12 项目作业
夜魇丶
2019-10-30 13:04:42
…有点难受，如果仅用原生js的话好多地方都不知道怎么实现，所以在实际开发中，如果学会了两个框架，可以两个框架同时使用来解决问题吗？
另外如果要获取css属性值，
用jquery的话：var width = $("#office-content-box").width();
这样就可以获取到。
但是用js的话：
var width = document.getElementById('office-content-box').style.width
console.log(width);
我在控制台打印不出这个width值，但是也没报错，是一行空白的内容。
是不是只有
<div style="width:200px;"></div>这样的形式才能使用 id.style.width这个属性获取到，而如果把这个属性放在xx.css文件里就没办法获取到了。
如果想用原生sj实现上面Jquery的效果，有没有什么更好的方法。另外在实际开发中，可以混合使用原生js和jquery的代码来实现效果（虽然原生js用的应该会比较少……）
感谢老师回答（这个作业我好像已经开了四个问题了…不好意思）
1回答
-
同学你好， 对于同学的疑惑可以参考如下解答
一般在实际开发中，为了提高工作效果，是可以直接使用框架解决问题，不过框架也是别人基于原生js封装的， 所以不管是在我们学习还是工作阶段，理解和掌握原生js对我们都是有很大帮助的，目前阶段， 同学也不用着急，慢慢积累总结， 练习多了熟练后会更容易理解哦
下图所示，同学的理解是对的， 原生js通过id.style.width的方式只能获取到行内样式的属性值
想要使用原生js获取元素的css样式， 需要结合getComputedStyle和currentStyle属性实现效果
（1）getComputedStyle方法是一个可以获取当前元素所有最终使用的CSS属性值。
（2）currentStyle是IE浏览器自己的一个属性，返回的是元素当前应用的最终CSS属性值
示例代码：
测试结果
这些知识不是很常用， 课堂上也没有讲解， 同学作为扩展知识了解一下即可， 因为一般通过style属性获取行内样式就可以满足大部分的效果需求了
在实际开发中， 可以使用原生js混合jquery实现效果的
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题