css内联样式可以改么？
导读
CSS内联样式可以改。下面本篇文章给大家介绍一下修改内联样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
以前写HTML有个不好的习惯，就是把样式添加到标签内，虽然写的时候觉得方便，但之后维护起来真心麻烦，一个样式要改，所有页面跟着改，当时没有想到其他简便的方法，就手动更改。
因为内联样式优先级高，再引入css覆盖样式不起作用，后来才发现有能覆盖掉内联样式的方法。就是加上!important，它可以改变样式优先级，降低内联样式的优先级。
如下代码没有加上!important，页面显示的是100*100的色块，内部样式没生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
<style type="text/css">
div{
background-color: red;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;"></div>
</body>
</html>加上之后内联样式被内部样式替代了。也就达到不用修改原来代码的目的了，不过还是要说，尽量样式不要写在标签内。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
<style type="text/css">
div{
background-color: red;
width: 50px !important;
height: 50px !important;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;"></div>
</body>
</html>还有一种方法，使用js来实现的，获取元素，然后更改元素的样式，$("div").css("width":"50");
用js这个方法不推荐，比较麻烦，还是用css好
猜你喜欢
评论(0)
