js修改css加载

布满荆棘的人生 2022-05-13 16:19 225阅读 0赞

js在修改页面css样式时，放在 < body> </ body>之前，得以修改。

<html>
    	<head>
    		<style type="text/css"> select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #DDD; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("dropdown_black.png") no-repeat scroll right center transparent !important; /*为下拉小箭头留出一点位置，避免被文字覆盖*/ padding-right: 20px; padding-left:5px; } /*清除ie的默认选择框样式清除，隐藏下拉箭头*/ select::-ms-expand { display: none; } </style>
    		<script type="text/javascript"> $().ready(function () { $("select").removeClass("select-control"); }); </script>
    	</head>
    	<body></body>
    </html>

<html>
    	<head>
    		<style type="text/css"> select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #DDD; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("dropdown_black.png") no-repeat scroll right center transparent !important; /*为下拉小箭头留出一点位置，避免被文字覆盖*/ padding-right: 20px; padding-left:5px; } /*清除ie的默认选择框样式清除，隐藏下拉箭头*/ select::-ms-expand { display: none; } </style>
    	</head>
    	<body></body>
    	<script type="text/javascript"> $().ready(function () { $("select").removeClass("select-control"); }); </script>
    </html>

第一段代码页面中select的样式被修改，第二段未能被修改。即类select-control未被删除。