js伪类的css修改方法
2017-10-14 14:06
197 查看
//reference to this link:https://pankajparashar.com/posts/modify-pseudo-elements-css/ I wrote a demo and just modified the top attribute of ::before,here is the demo. <head> <meta charset="UTF-8"> <title>测试是否可以js修改伪类元素css yessssss</title> <style type="text/css"> .htmlbox_close::before, .htmlbox_close::after { content: ''; position: absolute; height: 2px; top: 4%; width: 3%; left: 2%; margin-top: -1px; background: #51aed9; height: 1.1%; } .htmlbox_close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .htmlbox_close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } </style> </head> <body> <div class="htmlbox_close"></div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var str = window.getComputedStyle($('.htmlbox_close')[0], '::before').getPropertyValue('top'); console.log(str); document.styleSheets[0].addRule('.htmlbox_close::before', 'top:100px'); document.styleSheets[0].insertRule('.htmlbox_close::before { top:100px }', 0); document.styleSheets[0].addRule('.htmlbox_close::after', 'top:100px'); document.styleSheets[0].insertRule('.htmlbox_close::before { top:100px }', 0); var str = window.getComputedStyle($('.htmlbox_close')[0], '::before').getPropertyValue('top'); console.log(str); </script> </body>
项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式,但是我们都知道JavaScript或jQuery并没有伪类选择器。这里总结一下几种常见的方法。
HTML
<p class="red">Hi, this is a plain-old, sad-looking paragraph tag.</p>
CSS
.red::before {
content: 'red';
color: red;
}
方法一
使用JavaScript或者jQuery切换<p>元素的类名,修改样式。
.green::before {
content: 'green';
color: green;
}
$('p').removeClass('red').addClass('green');
方法二
在已存在的<style>中动态插入新样式。
document.styleSheets[0].addRule('.red::before','color: green');
document.styleSheets[0].insertRule('.red::before { color: green }', 0);
方法三
创建一份新的样式表,并使用JavaScript或jQuery将其插入到<head>中
// Create a new style tag
var style = document.createElement("style");
// Append the style tag to head
document.head.appendChild(style);
// Grab the stylesheet object
sheet = style.sheet
// Use addRule or insertRule to inject styles
sheet.addRule('.red::before','color: green');
sheet.insertRule('.red::before { color: green }', 0);
jQuery
$('<style>.red::before{color:green}</style>').appendTo('head');
方法四
使用HTML5的data-属性,在属性中使用attr()动态修改。
<p class="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
.red::before {
content: attr(data-attr);
color: red;
}
$('.red').attr('data-attr', 'green');
相关文章推荐
- CodeIgniter通过修改.htaccess文件的办法解决加载css js 图片类型文件的方法
- js 动态修改css文件的方法
- 解决修改css文件或js文件后浏览器无法及时更新的问题方法
- 通过js修改css伪类after,before等样式
- js 动态修改css文件的方法
- js操作select控件方法(新增、修改、删除、选中、清空、判断存在等)
- css、js两种方法实现遮罩效果
- jQuery修改操作css属性实现方法
- arcgis for js 修改infowindow样式的方法
- iOS之在webView中引入本地html,image,js,css文件的方法
- Idea-每次修改JS文件都需要重启Idea才能生效解决方法
- 二级下拉菜单的三种实现方法——CSS 、JS、 jQuery
- php使用gzip压缩传输js和css文件的方法
- js修改css属性、html属性
- 模拟jQuery中的ready方法及实现按需加载css,js
- js获取css值的方法:style、getComputedStyle和currentStyle
- csshover.htc在IE7下使用:active伪类无效解决方法
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- JS操作select相关方法:新增 修改 删除 选中 清空 判断存在
- ASP.NET MVC中使用Bundle打包压缩js和css的方法