Col*_*tin 101 html javascript css ajax dom
使用javascript设置内联CSS值很容易.如果我想改变宽度,我有这样的HTML:
<div style="width: 10px"></div>
我需要做的就是:
document.getElementById('id').style.width = value;
它将更改内联样式表值.通常这不是问题,因为内联样式会覆盖样式表.例:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId"></div>
使用此Javascript:
document.getElementById('tId').style.width = "30%";
我得到以下内容:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId" style="width: 30%";></div>
这是一个问题,因为我不仅不想更改内联值,如果我在设置之前查找宽度,当我有:
<div id="tId"></div>
返回的值是Null,所以如果我有Javascript需要知道某些逻辑的宽度(我将宽度增加1%,而不是特定值),当我期望字符串"50%"时返回Null "真的没用.
所以我的问题是:我的CSS样式中的值不是内联的,我如何获得这些值？在给定id的情况下,如何修改样式而不是内联值？
Mik*_*ike 89
好吧,听起来你想要改变全局CSS,这将有效地同时改变一个peticular风格的所有元素.我最近从Shawn Olson教程中学会了如何做到这一点.你可以在这里直接引用他的代码.
以下是摘要:
您可以通过检索样式表document.styleSheets.这实际上将返回页面中所有样式表的数组,但您可以通过该document.styleSheets[styleIndex].href属性判断您所在的样式表.找到要编辑的样式表后,需要获取规则数组.这在IE中称为"规则",在大多数其他浏览器中称为"cssRules".告诉您的CSSRule是什么方式是由selectorText属性.工作代码看起来像这样:
var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; //maybe '#tId'
var value = rule.value; //both selectorText and value are settable.
让我知道这对你是如何工作的,如果你发现任何错误,请发表评论.
Leo*_*uli 43
请!请问w3(http://www.quirksmode.org/dom/w3c_css.html)!或者实际上,我花了五个小时......但在这里!
function css(selector, property, value) {
for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
//Try add rule
try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
} catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
}
}
该功能非常易于使用..例如:
<div id="box" class="boxes" onclick="css('#box', 'color', 'red')">Click Me!</div>
Or:
<div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div>
Or:
<div class="boxes" onclick="css('body', 'border', '1px solid #3cc')">Click Me!</div>
哦..
(function (scope) {
// Create a new stylesheet in the bottom
// of <head>, where the css rules will go
var style = document.createElement('style');
document.head.appendChild(style);
var stylesheet = style.sheet;
scope.css = function (selector, property, value) {
// Append the rule (Major browsers)
try { stylesheet.insertRule(selector+' {'+property+':'+value+'}', stylesheet.cssRules.length);
} catch(err) {try { stylesheet.addRule(selector, property+':'+value); // (pre IE9)
} catch(err) {console.log("Couldn't add style");}} // (alien browsers)
}
})(window);
FrV*_*ofm 10
收集答案中的代码,我写了这个功能,似乎在我的FF 25上运行良好.
function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
/* returns the value of the element style of the rule in the stylesheet
* If no value is given, reads the value
* If value is given, the value is changed and returned
* If '' (empty string) is given, erases the value.
* The browser will apply the default one
*
* string stylesheet: part of the .css name to be recognized, e.g. 'default'
* string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
* string style: camelCase element style, e.g. 'fontSize'
* string value optionnal : the new value
*/
var CCSstyle = undefined, rules;
for(var m in document.styleSheets){
if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
for(var n in rules){
if(rules[n].selectorText == selectorText){
CCSstyle = rules[n].style;
break;
}
}
break;
}
}
if(value == undefined)
return CCSstyle[style]
else
return CCSstyle[style] = value
}
这是一种将值放在将在JS中使用的css的方法,即使浏览器不理解它也是如此.例如,滚动表中的tbody的maxHeight.
致电:
CCSStylesheetRuleStyle('default', "#mydiv", "height");
CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");
| 归档时间： |
|
| 查看次数： |
215844 次 |
| 最近记录： |