如何用js修改css样式？

更新日期: 2020-03-12阅读: 1.9k标签: 样式分享

复制链接

新浪微博

QQ 好友

扫一扫分享

如何用js修改css样式？下面本篇文章就来给大家介绍一下使用javascript修改css样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

共用代码：

<div id="div">这是一个盒子</div>
var div = document.getElementById("div");

第一种：用cssText

div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';

第二种：用setProperty()

div.style.setProperty('width','700px');
div.style.setProperty('height','300px');
div.style.setProperty('line-height','300px');
div.style.setProperty('background','#f00');
div.style.setProperty('color','#fff');
div.style.setProperty('border','1px solid blue');
div.style.setProperty('text-align','center');

第三种：使用css属性对应的style属性

div.style.width = "800px";
div.style.height = "250px"; 
div.style.lineHeight = "250px"; 
div.style.background = "#000";
div.style.color = "#fff";
div.style.border = "1px solid #111";
div.style.textAlign = "center";

<body>
        <div id="div">这是一个盒子</div>
        <script type="text/javascript">
            var div = document.getElementById("div");
            
            //第一种:用cssText
            div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';
            
            //第二种：用setProperty()
            div.style.setProperty('width','700px');
            div.style.setProperty('height','300px');
            div.style.setProperty('line-height','300px');
            div.style.setProperty('background','#f00');
            div.style.setProperty('color','#fff');
            div.style.setProperty('border','1px solid blue');
            div.style.setProperty('text-align','center');
            
            //第三种：使用css属性对应的style属性
            div.style.width = "800px";
            div.style.height = "250px"; 
            div.style.lineHeight = "250px"; 
            div.style.background = "#000";
            div.style.color = "#fff";
            div.style.border = "1px solid #111";
            div.style.textAlign = "center";
        </script>
</body

链接: https://fly63.com/article/detial/8980

如何用js修改css样式？

css样式大全，完整的Css样式大全(整理)

css 分割线样式_css实现文章分割线的多种方法总结

原生js获取、添加、修改_非行间css样式

css常用样式整理_css属性大全

CSS层叠样式表

如何用自己喜欢的 CSS 风格重置网站的样式

css单行截断和多行截断问题

引入CSS样式的三种方式

整理一些少用但又实用的 CSS 样式

vue用v-html加载渲染，里面的内容样式不生效