如何使用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)); 
    } 
});

任何幫助將不勝感激。

三江源

來源

2013-05-22 Lilu Patel

三江源，我已經通過使用CSS類實現相同的：

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

，然後添加該代碼使用的樣式：

techSBlueBox.addClass('showBlueBox');

來源

2013-05-22 21:18:58

您的代碼基本上是工作似乎但是有一些語法問題。

1）JavaScript對象屬性中的碎片導致必須引用那些屬性。所以「背景顏色」需要引用它。

2）你的建設得到了#techsolutions節點實例不工作，但可以大大簡化到只是Y.one（「＃techsolutions」）

3）你的小提琴需要已加載ÿ .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-22 12:01:14

如何使用Y.StyleSheet樣式

回答

相關問題