改变内联样式

开发工具与关键技术：Vs

作者：Mr_恺

撰写时间：2019年7月17日

 

估计很多人都想我一样，为了的时候觉得方便，把样式添加到标签内，

但之后修改样式的时候起来真心麻烦，因为内联样式优先级高，再引入css覆盖样式不起作用或者在页面这样写内部样式也是覆盖不了之前的样式：

后来才发现有能覆盖掉内联样式的方法。就是加上!important，它可以改变样式优先级，降低内联样式的优先级。

如果代码没有加上!important，页面显示的是150*150的清色的色块，说明了我们给的内部样式没生效，内联样式优先。

 

加上!important之后内联样式被内部样式替代了，就可以达到不用修改之前在标签那里的样式代码的目的了，不过还是要说，尽量样式不要写在标签内。

 

 

页面显示的是60*60的红色的色块，说明了我们给的内部样式生效，内联样式降低。

 

 

还有一种方法，就是使用js来实现的，

先获取元素，然后更改元素的样式，

$("div").css("width":"60");

但是用JS的方法，虽然是可以改变内联样式，但是很麻烦，个人建议还是用Css内部样式比较好一些，起码没用那么麻烦吧，如果不信可以用JS来改一下样式，体现一下。