原生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获取隐藏dom的宽高具体实现
一个隐藏的DOM是获取不到宽高的，如果想要获取，采用下面的方法：
2013-07-07
JavaScript 动态三角函数实例详解
本文通过实例代码给大家实例讲解了javascript动态三角函数知识，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-01-01
JavaScript中数组遍历的7种方法小结
作为JavaScript开发人员,熟悉数组的遍历和操作是非常重要的,数组遍历是处理和操作数组元素的基本需求之一,本文将介绍JavaScript中的7种常见数组遍历方法,帮助你成为数组操作的达人
2023-11-11
微信小程序实现跳转的几种方式总结（推荐）
这篇文章主要介绍了微信小程序跳转方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
一个JavaScript去除字符串末尾的空白实例代码
这是一个JavaScript去除字符串末尾的空白实例代码，很简单，但很实用，喜欢的朋友可以参考下
2014-09-09
JS中多层次排序算法的实现代码
这篇文章主要给大家介绍了关于JS中多层次排序算法的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
运用js教你轻松制作html音乐播放器
这篇文章主要为大家详细介绍了如何运用js教你轻松制作html音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
第四篇Bootstrap网格系统偏移列和嵌套列
这篇文章主要介绍了Bootstrap网格系统偏移列和嵌套列的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
Js检查变量类型的代码()
本文章为你提供一款js 返回变量的类型代码哦，如果你不懂得如何获取js变量的类型的话，看看我们下面的代码你就知道如何获取js变量的代码哦。
2010-07-07
Bootstrap框架的学习教程详解(二)
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍Bootstrap框架的学习教程详解，对bootstrap框架感兴趣的朋友跟着小编一起学习吧
2016-10-10