javascript - 如何使用 Y.StyleSheet 设计样式

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 对象属性中的破折号导致必须引用这些属性。所以“background-color”需要用引号引起来。

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

3) 你的 fiddle 需要在执行代码之前加载 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));
        }
    });
});

fiddle :http://jsfiddle.net/brianjmiller/AxUMD/128/