js动态为html标签增加class属性及样式

有时候在项目中，我们需要动态的改变相关标签的样式，这样我们可以事先在css中定义好class属性的样式。然后在js中使用addClass，为需要的标签增加定义好的样式的class属性和值，例如：$("#baiye_ben").addClass('day_class');，这样就可以实现我们想要的效果。
具体相关步骤如下：
1、jsp相关代码

<span id="baiye_ben"></span>

2.css相关代码

/*白班*/.day_class {background:url(../images/day_shift.png) no-repeat;height:20px;padding-left:26px;
}

3、js相关代码

$("#baiye_ben").addClass('day_class');

结语：亲测有效，如果换上之后没有效果可以清下缓存试试哈，想具体了解addClass的话可以直接搜索相关文档查看。

js动态为html标签增加class属性及样式相关推荐

通过JS动态设置meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信）
JS动态添加meta标签,根据手机屏幕分辨率自动缩放适配各手机(包括适配华为.oppo大屏幕手机.钉钉.微信进入) 5月28晚上周四下班接了一个急活,一个面向国外的国际官方网站,三方适配+兼容.说是月 ...
js动态修改html标签属性,通过js动态创建标签,并设置属性方法
当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个d ...
Html的a标签onclick属性,关于通过js给a标签增加onclick属性
var selfw2 = this; //selfw2.loadData(nm); return selfw2.loadData(nm).then(function(){ var cardInstan ...
如何通过JS动态给li标签添加点击事件并跳转
如何给li标签添加点击事件一.HTML demo代码二.JS动态新增li并绑定点击事件三.效果图有很长一段时间没写博客了,最近做了一个类似于榜单的小需求,遇到了一些小问题,姑且简单的记录一下吧 ...
前端| js动态修改video标签视频不刷新的问题
问题描述:在网页上用<video>标签放一个视频播放器,点击视频目录来自动播放不同的视频.通过js动态生成li,点击li之后更改<video>标签<source>中 ...
JS动态添加li标签
HTML代码 <div class="col-xs-12"><ul id="tabName" class="nav nav-tabs ...
js动态添加meta标签
有时候我们需要动态添加meta标签和里面的内容,如何添加呢? 举例: // 手动添加mate标签const addMeta = (name, content) => {const meta = ...
【WEB】HTML标签自带属性title样式修改
背景最近字体版权问题,公司的网站页面要统一换字体,Windows平台换成宋体(SimSun),Mac平台换成黑体(SimHei).然后,偶然留意到title的默认提示框.title的样式是没法使用C ...
js 动态创建table标签下的tr标签
使用JavaScript根据后台获取的数据进行创建table标签下的tr标签前端页面中的标签部分代码 <table class="layui-table lay-even" ...

js动态为html标签增加class属性及样式

js动态为html标签增加class属性及样式相关推荐

最新文章

热门文章