任何人都可以帮助我,我有两个问题.
我想要做的是在运行中使用jQuery更改css类规则.
.classname{color:red; font-size:14px;}
在上面的示例中,我有一个名为.classnamenow 的类,现在使用jQuery我想更改字体大小而不是颜色,而.classname不是通过添加css内联.
我想创建并保存.classname对文件的更改,记住将有完整的样式表或没有将保存在文件中的类名.
我怎样才能以最简单,最好的方式做到这一点？
谢谢!
Ion*_*tan 54
据我所知,没有jQuery方法可以做到这一点.可能有一些jQuery插件,但我不知道.
基本上,您在第一个问题中尝试实现的目标是使用对象的styleSheets属性document.它比你需要走到一个相当深的对象链更复杂,但仍适用于所有主流浏览器,包括Internet Explorer 6.以下是概念验证.CSS位于STYLE标记内,但也适用于外部CSS.我会让你做抽象.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
.classname {
color: red;
font-size: 14px;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("button").onclick = function() {
var ss = document.styleSheets;
for (var i=0; i<ss.length; i++) {
var rules = ss[i].cssRules || ss[i].rules;
for (var j=0; j<rules.length; j++) {
if (rules[j].selectorText === ".classname") {
rules[j].style.color = "green";
}
}
}
};
}
</script>
</head>
<body>
<h1 class="classname">Some red text</h1>
<button id="button">Make text green</button>
</body>
</html>
对于你的第二个问题,我没有时间编写解决方案,但它将涉及如上所述读取CSS声明并使用cssTextCssRule对象的属性来构建一个字符串,最终将使用一个字符串发送到服务器Ajax POST请求.服务器端是您的业务.
参考文献:
希望能帮助到你
Nil*_*esh 17
最近我需要为Autocomplete小部件修复一些jquery主题问题.我想更改自动完成小部件的背景颜色.
所以我查了一下CSS,发现autocomplete类是这样定义的
.ui-autocomplete { position: absolute; cursor: default; }
所以在我的程序中,我发出以下语句来通过添加background属性来更改类.请注意,我保留其他属性,否则会破坏现有功能
$("<style type='text/css'> .ui-autocomplete { position: absolute; cursor: default; background:black; color:white} </style>").appendTo("head");
Bla*_*ago 13
只有在以下情况下才应采用此方法:
有一个jQuery插件可以做到这一点:http://plugins.jquery.com/project/jquerycssrule
对于我工作的一个小项目,我提取了基本要素并创建了以下功能:
function addCSSRule(sel, prop, val) {
for(var i = 0; i < document.styleSheets.length; i++){
var ss = document.styleSheets[i];
var rules = (ss.cssRules || ss.rules);
var lsel = sel.toLowerCase();
for(var i2 = 0, len = rules.length; i2 < len; i2++){
if(rules[i2].selectorText && (rules[i2].selectorText.toLowerCase() == lsel)){
if(val != null){
rules[i2].style[prop] = val;
return;
}
else{
if(ss.deleteRule){
ss.deleteRule(i2);
}
else if(ss.removeRule){
ss.removeRule(i2);
}
else{
rules[i2].style.cssText = '';
}
}
}
}
}
var ss = document.styleSheets[0] || {};
if(ss.insertRule) {
var rules = (ss.cssRules || ss.rules);
ss.insertRule(sel + '{ ' + prop + ':' + val + '; }', rules.length);
}
else if(ss.addRule){
ss.addRule(sel, prop + ':' + val + ';', 0);
}
}
Rus*_*Cam 12
如果我正确理解您的问题,您想通读CSS文件,对类进行更改,然后通过保存文件来保留这些更改？
使用从客户端运行的JavaScript/jQuery无法做到这一点; 您当然可以更改DOM中与CSS类匹配的每个元素的字体大小 .classname,就像这样
$('.classname').css('font-size','14px');
但是客户端JavaScript无法从Web浏览器访问文件系统,因此您需要一些其他方式(即服务器端代码)来更改CSS文件本身.
您也可以尝试使用JSS,它对我来说非常有用:https://github.com/Box9/jss
在HTML中下载并包含jss.js:
Run Code Online (Sandbox Code Playgroud)<script type="text/javascript" src="jss.js"></script>添加新规则(或扩展现有规则):
Run Code Online (Sandbox Code Playgroud)jss('.special', { color: 'red', fontSize: '2em', padding: '10px' });检索现有规则:
Run Code Online (Sandbox Code Playgroud)jss('.special').get();返回:
Run Code Online (Sandbox Code Playgroud){ 'color': 'red', 'font-size': '2em', 'padding-bottom': '10px', 'padding-left': '10px', 'padding-right': '10px', 'padding-top': '10px' }删除现有规则:
Run Code Online (Sandbox Code Playgroud)jss('.special').remove();
| 归档时间： |
|
| 查看次数： |
85205 次 |
| 最近记录： |