原生Javascript/原生JS修改CSS样式的4种方式简单示例
更新时间：2024年03月25日 10:36:52 作者：星河_赵梓宇
在网页开发中我们经常会用到JavaScript来操作网页元素,其中一个常见的操作就是修改元素的CSS样式,下面这篇文章主要给大家介绍了关于原生Javascript/原生JS修改CSS样式的4种方式,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
设置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样式内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
这篇文章主要为大家介绍了图形编辑器中JS实现防误操作之拖拽阻塞实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了基于JavaScript实现移动端无限加载分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了js实时获取并显示当前时间的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了JS计算输出100元钱买100只鸡问题的解决方法,简单描述了100元钱买100只鸡问题并结合实例形式分析了问题解决的思路与具体实现方法,需要的朋友可以参考下2018-01-01
本文给大家介绍关于文件上传非ajax提交得到后台数据的问题我们该怎么处理呢？下文给大家介绍的非常详细，感兴趣的朋友一起看看吧2016-10-10
在本篇文章里小编给大家整理的是关于不刷新网页就能链接新的js文件方法总结，需要的朋友们参考下。2020-03-03
本篇主要是对JS操作iframe里的dom进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
生命周期是指一个对象从创建→>运行>销毁的整个阶段，强调的是一个时间段，文中介绍了小程序中组件的生命周期，需要的朋友可以参考下2022-08-08
表单验证正则的代码，大家可以参考下，可以直接拿来使用，也可以用来学习正则。2009-09-09
今天小编就为大家分享一篇浅谈layui框架自带分页和表格重载的接口解析问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论