Search code examples
cssstylesheetyui

YUI StyleSheet doesn't change content of tag style


I'm trying to use YUI StyleSheet to change some content of the style tag but it doesn't change. Visually, everything works but when I inspect the code in chrome Dev Tools there are no changes. Am I doing something wrong?

My code:

Style

<style id="myStyle">
h1
{
    background-color: red;  
}
</style>

JavaScript with YUI

YUI().use('node','stylesheet', function (Y)
{
    var sheet = Y.StyleSheet(Y.one("#myStyle"));
    sheet.set(
        "h1",
        {
            backgroundColor: "#aabbcc",
            paddingLeft: "100px",
            paddingTop: "100px"
        });
});

After YUI does its magic, content of the tag remains the same. I even don't know where all the style goes.


Solution

  • It is ok. YUI StyleSheet works with styleSheets objects but not with the inner text of style DOM element. So visually everything works, but Dev Tools doesn't show the changes. Check the styles of your h1 element - you should see, that your changes is applied.