0

我正在尝试使用 Y.StyleSheet 设置元素的样式。

这就是我目前正在做的事情，它工作正常：http: //jsfiddle.net/AxUMD/47/

document.documentElement.className += ' js';

Y.one('#techsolutionsCheckBox input[type=checkbox]').on('change', function (e) {
    var target = e.currentTarget,
        techSBox = Y.one('.box'),
        techSBlueBox = document.getElementById( 'techsolutions' );
        colourBlue = "#cee4f2",
        colourWhite = "#ffffff";

    if (target.get('checked')) { 
       techSBox.removeClass('hidden');
       techSBlueBox.style.backgroundColor = colourBlue;
       techSBlueBox.style.width = "380px"; 
       techSBlueBox.style.height = "100px";
    } else {
        techSBox.addClass('hidden');
        techSBlueBox.style.backgroundColor = colourWhite;
        techSBlueBox.style.width = null; 
        techSBlueBox.style.height = null;
    }
});

但这就是我想做的事情：http: //jsfiddle.net/AxUMD/57/ 但它没有像我想象的那样工作。

document.documentElement.className += ' js';

Y.one('#techsolutionsCheckBox input[type=checkbox]').on('change', function (e) {
    var target = e.currentTarget,
        techSBox = Y.one('.box'),
        techSBlueBox = Y.one(Y.DOM.byId("#techsolutions")),
        changesChecked = { background-color : '#cee4f2', width : '380px', height : '100px' },
        changesUnChecked = { background-color : '#ffffff', width : null, height : null },
        currentStyle = techSBlueBox.getStyle('cssText');

    if (target.get('checked')) { 
       techSBox.removeClass('hidden');
       techSBlueBox.setStyle('cssText', Y.StyleSheet.toCssText(changesChecked, currentStyle));
    } else {
        techSBox.addClass('hidden');
        techSBlueBox.setStyle('cssText', Y.StyleSheet.toCssText(changesUnChecked, currentStyle));
    }
});

任何帮助将不胜感激。

谢谢

4

2 回答 2

1

您的代码基本上可以正常工作，但有一些语法问题。

1) JavaScript 对象属性中的破折号导致必须引用这些属性。所以“背景颜色”需要引号。

2）您为#techsolutions 获取节点实例的构造不起作用，但可以大大简化为仅 Y.one("#techsolutions")

3）您的小提琴需要在执行代码之前加载 Y.Stylesheet 以便存在静态方法。将“样式表”（模块名称）添加到您的 YUI().use() 调用或将您的代码包装在一个额外的 Y.use 中将解决这个问题。

document.documentElement.className += ' js';

Y.use("stylesheet", function (Y) {
    Y.one('#techsolutionsCheckBox input[type=checkbox]').on('change', function (e) {
        var target = e.currentTarget,
            techSBox = Y.one('.box'),
            techSBlueBox = Y.one(Y.DOM.byId("#techsolutions")),
            changesChecked = { "background-color" : '#cee4f2', width : '380px', height : '100px' },
            changesUnChecked = { "background-color" : '#ffffff', width : null, height : null },
            currentStyle = techSBlueBox.getStyle('cssText');

        if (target.get('checked')) { 
           techSBox.removeClass('hidden');
           techSBlueBox.setStyle('cssText', Y.StyleSheet.toCssText(changesChecked, currentStyle));
        } else {
            techSBox.addClass('hidden');
            techSBlueBox.setStyle('cssText', Y.StyleSheet.toCssText(changesUnChecked, currentStyle));
        }
    });
});

小提琴：http: //jsfiddle.net/brianjmiller/AxUMD/128/

于 2013-05-22T12:01:14.653 回答
0

谢谢，我通过使用 css 类也达到了同样的效果：

.showBlueBox {
    background-color:#cee4f2;
    width : 370px;
    height : 100px;
}

然后添加此代码以使用样式：

techSBlueBox.addClass('showBlueBox');
于 2013-05-22T21:18:58.580 回答