我想通过jQuery替换CSS中标签的内容。
在这种情况下,内容"我的内容"到"新内容"。
我有这个CSS代码:
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react']
}
}
]
}
};
我尝试了这个jQuery代码:
a.appari:focus:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: "My content";
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 400px;
}
感谢您的帮助。
答案 0 :(得分:2)
您遇到了CSS特异性问题。更改jQuery中的选择器以具有比原始规则足够或更多的特异性。您只需向a
添加.appari
即可a.appari
(与您原来的CSS特异性相匹配)
$("<style>a.appari:focus:after { content: 'New Content'; }</style>").appendTo("head")
$('.appari').click(function() {
$("<style>a.appari:focus:after { content: 'New Content'; }</style>").appendTo("head");
});
&#13;
a.appari:focus:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
content: "My content";
padding: 5px 15px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="appari">foo</a>
&#13;