我有一个 keyboard.css 文件和一个 keyboard.js 文件,我正在尝试更改 css 规则
.ui-keyboard div { font-size: 1.1em; }
我想更改字体大小。有没有办法不使用
$(".ui-keyboard div").css()
?
我想在元素渲染之前改变值,我想在元素的构造中传递值
$('.onScreenKeyboard').keyboard({
zoomLevel: 2
});
编辑:澄清一下,目标是有一种方法可以更改字体大小,而不必去编辑 CSS 上的值。我想在执行此操作的库中创建一个选项:
在构造函数中,我检查选项并更改元素,
//set Zoom Level
if(o.zoomLevel){
//Change CSS Here.
}
最佳答案
也许您正在寻找类似 CSSStyleSheet
的内容的 insertRule
和 deleteRule
.
这是我前一段时间写的一些代码,让我修改CSS规则
function CSS(sheet) {
if (sheet.constructor.name === 'CSSStyleSheet') this.sheet = sheet;
else if (sheet.constructor.name === 'HTMLStyleElement') this.sheet = sheet.sheet;
else throw new TypeError(sheet + ' is not a StyleSheet');
}
CSS.prototype = {
constructor : CSS,
add: function (cssText) {
return this.sheet.insertRule(cssText, this.sheet.cssRules.length);
},
del: function (index) {
return this.sheet.deleteRule(index);
},
edit: function (index, cssText) {
var i;
if (index < 0) index = 0;
if (index >= this.sheet.cssRules.length) return this.add( cssText );
i = this.sheet.insertRule(cssText, index);
if (i === index) this.sheet.deleteRule(i + 1);
return i;
}
};
您可以通过给构造函数 CSS
来使用它你的<style>
节点,或者直接是 StyleSheet,然后使用 .edit
使用规则的 index 和您想要的新规则。例如
// get StyleSheet
var mycss = new CSS(document.querySelector('style[src="keyboard.css"]'));
// edit rule 0
mycss.edit(0, '.ui-keyboard div { font-size: 5em; }');
关于javascript - 更改文件中的 CSS 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16362307/