修改html内联样式的方法

最新推荐文章于 2024-08-01 09:59:14 发布

yuanlintufang

最新推荐文章于 2024-08-01 09:59:14 发布

阅读量1.6w

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/yuanlintufang/article/details/53234750

版权

以前写html有个不好的习惯，就是把样式添加到标签内，虽然写的时候觉得方便，但之后维护起来真心麻烦，一个样式要改，所有页面跟着改，当时没有想到其他简便的方法，就手动更改。因为内联样式优先级高，再引入css覆盖样式不起作用，后来才发现有能覆盖掉内联样式的方法。就是加上!important，它可以改变样式优先级，降低内联样式的优先级。

如下代码没有加上!important，页面显示的是100*100的色块，内部样式没生效。

<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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好

yuanlintufang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
修改html内联样式的方法

以前写html有个不好的习惯，就是把样式添加到标签内，虽然写的时候觉得方便，但之后维护起来真心麻烦，一个样式要改，所有页面跟着改，当时没有想到其他简便的方法，就手动更改。因为内联样式优先级高，再引入css覆盖样式不起作用，后来才发现有能覆盖掉内联样式的方法。就是加上!important，它可以改变样式优先级，降低内联样式的优先级。如下代码没有加上!important，页面显示的是100*100
复制链接

扫一扫