如何使用y.s stylesheet进行样式设置

How to style with Y.StyleSheet

本文关键字：样式 设置 stylesheet 何使用      更新时间：2023-09-26

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

任何帮助都将是非常感激的。

谢谢

你的代码似乎基本工作，但有一些语法问题。

1) JavaScript对象属性中的破折号导致这些属性必须加引号。所以"background-color"需要加引号。

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

3)在执行代码之前，您需要加载y.s stylesheet，以便静态方法存在。将"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/

谢谢，我已经实现了相同的使用css类:

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

，然后添加以下代码来使用样式:

techSBlueBox.addClass('showBlueBox');
相关文章：