1

我有一个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.
}
4

2 回答 2

2

也许您正在寻找类似CSSStyleSheet'sinsertRule和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与规则的索引和您想要的新规则一起使用。例如

// get StyleSheet
var mycss = new CSS(document.querySelector('style[src="keyboard.css"]'));
// edit rule 0
mycss.edit(0, '.ui-keyboard div { font-size: 5em; }');
于 2013-05-03T15:42:57.267 回答
0

将以下 css 添加到元素中，最初您不会显示它，直到您运行库更改样式属性然后显示它。

.ui-keyboard div {
     font-size: 1.1em;
     display: none;
}

您还可以通过执行以下操作在不使用 jQuery 的情况下更改字体大小：

[element].style.fontSize = "25px";
于 2013-05-03T15:41:09.003 回答