原生Javascript/原生JS修改CSS样式的4种方式简单示例

更新时间：2024年03月25日 10:36:52 作者：星河_赵梓宇

在网页开发中我们经常会用到JavaScript来操作网页元素,其中一个常见的操作就是修改元素的CSS样式,下面这篇文章主要给大家介绍了关于原生Javascript/原生JS修改CSS样式的4种方式,需要的朋友可以参考下

设置style

var domName = document.querySelector('#domName');
domName.style.backgroundColor = '#aaa'

设置属性setAttribute

var domName = document.querySelector('#domName');
domName.setAttribute('style', 'background: #000;')

设置cssText

var domName = document.querySelector('#domName');
domName.style.cssText = 'background:#000; margin:0px 2px;'

设置class

重写className以修改CSS样式

var domName = document.querySelector('#domName');
domName.className = 'red';

另外通过classList已修改CSS样式，可以避免class被覆盖

var bottom = document.querySelector('#bottom');
bottom.classList.add(className); // 添加一个类名
bottom.classList.remove(className); // 移除一个类名
bottom.classList.add('red')

附：JS修改CSS的实例代码

需求

点按钮，修改p标签的字体、颜色、大小

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript操纵Css</title>
<style type="text/css">
    .two{
        color: rebeccapurple;
        font-size: 45px;
        font-family: "BIZ UDP明朝 Medium";
    }
</style>
</head>
<script type="text/javascript">
    //方式一：修改多个样式属性
    function changeCss () {
//color: blue; font‐size: 30px; font‐family: 楷体;
//得到first这个p
        var p1 = document.getElementById("first");
//语法：元素.style.样式名=样式值;
        p1.style.color = "blue";
        p1.style.fontSize = "30px";
        p1.style.fontFamily = "楷体";
    }
    //方式二：首先创建一个类样式，然后一条语句一次性修改所有的样式
    function changeClass () {
        var p2 = document.getElementById("second");
//语法：元素.className = "类名";
        p2.className = "two";
    }
</script>
<body>
<p id="first">
    元素.style.样式名 = "样式值";
</p>
<p id="second">
    元素.className = "类名";
</p>
<input type="button" value="style.样式名,修改多个样式属性" onclick="changeCss()"/>
<input type="button" value="className,改变类样式" onclick="changeClass()"/>
</body>
</html>

效果

总结

到此这篇关于原生Javascript/原生JS修改CSS样式的4种方式的文章就介绍到这了,更多相关原生JS修改CSS样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript实现无缝上下滚动特效
这篇文章主要介绍了javascript实现无缝上下滚动特效的相关资料,需要的朋友可以参考下
2015-12-12
IE与FireFox的JavaScript兼容问题解决办法
本篇文章主要是对IE与FireFox的JavaScript兼容问题解决办法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
javascript模拟命名空间
JavaScript 没有任何特定语言功能来支持命名空间，但很容易使用对象来模拟命名空间。今天我们就来探讨下这个问题，希望大家能够喜欢。
2015-04-04
JavaScript组合拼接字符串的效率对比测试
这篇文章主要介绍了JavaScript组合拼接字符串的效率对比测试,本文测试了IE6、Firefox、Mozilla、Netscape、Opera等浏览器,需要的朋友可以参考下
2014-11-11
javascript 动态生成私有变量访问器
创建一个新的用户对象，接受一个有许多属性的对象作为参数
2009-12-12
javascript中callee与caller的区别分析
有些小伙伴可能会问caller,callee 是什么？在javascript 中有什么样的作用？那么本篇会对于此做一些基本介绍。希望能够对大家理解javascript中的callee与caller有所帮助。
2015-04-04
JavaScript中7种位运算符在实战的妙用
位运算是在数字底层(即表示数字的 32 个数位)进行运算的,下面这篇文章主要给大家介绍了关于JavaScript中7种位运算符在实战的妙用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
单行 JS 实现移动端金钱格式的输入规则
这篇文章主要介绍了单行 JS 实现移动端金钱格式的输入规则,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-05-05
JS控制静态页面之间传递参数获取参数并应用的简单实例
下面小编就为大家带来一篇JS控制静态页面之间传递参数获取参数并应用的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
深入了解Hybrid App技术的相关知识
这篇文章主要介绍了深入了解Hybrid App技术的相关知识，Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 ",需要的朋友可以参考下
2019-07-07