Question

我正在尝试使用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));
    }
});

非常感谢任何帮助。

三江源

Answer 1

您的代码看起来基本上正常工作但有一些语法问题。

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

2）为#techsolutions获取Node实例的构造不起作用，但可以大大简化为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/

Answer 2

谢谢，我通过使用css类实现了相同的目标：

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

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

techSBlueBox.addClass('showBlueBox');

如何使用Y.StyleSheet进行样式设置

2 个答案: