0

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.

shadox
  • 3,238
  • 4
  • 24
  • 38
  • How are you inspecting the code in Chrome Dev tools? If you're viewing source, you'll see only the original style. – barnyr Oct 18 '13 at 10:19
  • I know, I'm inspecting current code not the source files. Press F12 or CTRL+Shift+I. – shadox Oct 18 '13 at 10:45

1 Answers1

1

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.

jslayer
  • 484
  • 3
  • 11
  • That's the problem. I'm not sure id YUI is a solution for me. I want to export styles. Is it possible somehow to do that? – shadox Oct 23 '13 at 08:41
  • Have you tried this http://yuilibrary.com/yui/docs/api/classes/StyleSheet.html#method_getCssText ? – jslayer Oct 23 '13 at 09:58