apply many class into inline style html

Question

I want to apply the more css class directly to inline style tag dynamically, I tried like below not working (In my situation I can't able to create a class) It is working for tag but not work for

    <script type='text/javascript'>
    function CommonClassCreateFunction()
    {
      var css_cls="{color: #900;margin-top:20px;}:hover {margin-top:0px;}";
      return css_cls;
    }
    </script>
    -----
    -----
    <script type='text/javascript'>
    var css_cls=CommonClassCreateFunction();
    $('#iiffrraammee').contents().find('#newtxtid').css(css_cls);
    </script>

-----
-----
<textarea class="expand close" id="newtxtid" name="ta" wrap="hard" spellcheck="false"></textarea>

You are using the `css` method as a getter not a setter, it tries to return the value of `{color: #900;margin-top:20px;}:hover {margin-top:0px;}` property, which of course doesn't exist. That's not even valid CSS. — Ram, Aug 03 '14 at 05:54
var css_cls={"color":"green","margin-left":"12px","margin-top":"12px","outline":"0px !important"}; This is working well, but I want to add hover style also — , Aug 03 '14 at 05:58
You can create a style tag, check this http://stackoverflow.com/questions/2692770/adding-css-rules-with-text-method-to-style-element-does-not-work-in-ie — Ram, Aug 03 '14 at 06:00

RGS · Accepted Answer · 2014-08-03T06:07:58.060

0

CSS

.txtClass{ color: #900; margin-top:20px;}
.txtClass:hover{ margin-top:0px;}

JQuery

$('#iiffrraammee').contents().find('#newtxtid').addClass('txtClass');

Demo:

http://jsfiddle.net/qx2QY/

edited Aug 03 '14 at 06:07

answered Aug 03 '14 at 05:59

RGS

5,131
6
37
65

score 0 · Answer 2 · answered Aug 03 '14 at 06:00

jQuery allows you to change the css with it's .css() function. You do this by passing the css rules as arguments:

$('#iiffrraammee').contents().find('#newtxtid').newtxtid.css({
    'color': '#900',
    'margin-top': '20px',
});

$('#iiffrraammee').contents().find('#newtxtid:hover').newtxtid.css({
    'margin-top': '0px'
});

Check out the .css() function documentation.

score 0 · Answer 3 · answered Aug 03 '14 at 06:01

You can`t do this, inline style supports only proprieties, what you have to do is define the class proprieties in a .css file or between tags and add this class to the DOM.

Exemple:

CSS

   <style>
   .NewClass{ color: #900; margin-top:20px;
   }
   .NewClass:hover{ margin-top:0px;
   }
   </style>

jQuery:

$('#iiffrraammee').contents().find('#newtxtid').addClass('NewClass');

score 0 · Answer 4 · edited May 23 '17 at 12:30

Javascript runs as soon as it appears in the html source. In your example the javascript is located above the html it wants to modify, this results in an error.

Having all the HTML download and display un-formatted and then applying CSS will cause the browser to render the un-formatted html and then change it. The site will appear to many as broken and the reformatting will be distracting and create the feeling that the site is slow. It is not a good user experience.

jquery basicly changes the tags inline property.

:hover is a pseudo-selector, which is used in a stylesheet. It is not impossible to use javascript to create a stylesheet but it is impractical ... How to write a:hover in inline CSS? ... but for the sake of the user I would not recommend the practice.

Note: inline pseudo-selectors were considered in the working draft, http://www.w3.org/TR/2002/WD-css-style-attr-20020515 But they were never adopted and do not work in modern browsers.

apply many class into inline style html

4 Answers4