js 关于动态添加class样式的学习

如果，我这里有一个需求。如下的页面代码

<body>
<input type="button" value="红" id="btn1"/>
<p id="p1">
2016年圣诞前的一个星期天下午，我推开窗，加州明媚的阳光洒在街道上，四季如春的旧金山和风拂面。对面屋外草地上金发碧眼的孩子们正兴奋的跑着跳着，看着家长给圣诞树装扮上满满的礼物 。眺望不远处，是Twin Peaks上跑步健身的青年男女大秀好身材，悠扬的教堂钟声飘过几个街区声声入耳。那时我30出头，在硅谷一家企业软件公司做产品经理，工作轻松，生活惬意，却觉得少了些什么。我叫伟耘，是阿里云网络团队的产品运营。工作十年了，分享生命中的三个瞬间，留作纪念。
</p>
</body>

我现在要求，点击‘红’的按钮的时候，给下边的<p>标签设置一些样式，我可以用js代码来实现

如下：

<script>
window.onload = function(){var oBtn1 = document.getElementById("btn1");var oP = document.getElementById("p1");oBtn1.onclick = function(){oP.style.width = '300px';oP.style.background = 'red';oP.style.color = 'yellow';oP.style.border = '10px #ccc solid';oP.style.padding = '20px';};
};
</script>

这样完全能实现要求，但是，如果我要求的样式再多一点呢？这么写岂不是非常繁琐？

那我们能不能给它定义一个css样式的class，通过动态的添加class来实现点击按钮改变样式的需求呢？

毫无疑问，当然可以。

但是动态的添加class需要注意一下写法，因为class是js的保留字，不能直接使用，要通过className来动态的添加class

class ==> className

oP.class = 'red';   -- 错
oP.className = 'red';  --对

下边将刚刚用js实现的功能用动态添加class的方式实现一下；

<script>
window.onload = function(){var oBtn1 = document.getElementById("btn1");var oP = document.getElementById("p1");oBtn1.onclick = function(){oP.className = 'red';}; };
</script>
<style>
.red{width:300px;background:red;color:yellow;border:10px solid #CCC;padding:20px;}
</style>

【按钮点击之前】

【按钮点击之后】

js 关于动态添加class样式的学习相关推荐

js中动态添加/插入HTML代码块，并通过JQuery动态绑定点击事件
文章目录前言一.场景需求还原二.代码示例 1.引入JQuery库 2.代码示例一:HTML中div标签部分二:HTML中script标签部分三:JS文件部分总结前言本篇文章中讲的是在 ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
用JS来动态设置CSS样式
常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 ...
html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
用JS来动态设置CSS样式的八种方式
转自:微点阅读 https://www.weidianyuedu.com 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无 ...
怎么用JS来动态设置CSS样式
用JS来动态设置CSS样式,常见的有以下几种: 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有"-"号,就写成驼峰的形式(如textAl ...
用JS来动态设置CSS样式的常见8种方式。
转自:微点阅读 https://www.weidianyuedu.com 如何用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important ...
html追加没有样式,js/jquery动态添加html，样式和方法不生效的解决方案
var html = " " + " " + " \n" + " \n" + " \n" + &qu ...

js 关于动态添加class样式的学习

js 关于动态添加class样式的学习相关推荐

最新文章

热门文章