add CSS to JavaScript

Question

How can I add a set of CSS rules like F.I. opacity:0.94; outline:none; content:""; display:block; position:absolute; top:20px; left:50%; margin:0 0 0 -5px; width:0; height:0; line-height:0px; font-size:0px; to the JavaScript below? The JavaScript shows tooltips, but I need to make them more fancy, so that I can use them on an image map.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>  
<script type='text/javascript'>
//<![CDATA[ 
$(window).load(function () {
    $('.1,.2,.3').css({
        position: 'absolute'
    }).hide()
    $('area').each(function (i) {
        $('area').eq(i).bind('mouseover mousemove', function (e) {
            $('.1,.2,.3').eq(i).css({
                top: e.pageY + 10,
                left: e.pageX + 10
            }).show()
        })
        $('area').eq(i).bind('mouseout', function () {
            $('.1,.2,.3').hide()
        })
    })
});//]]>  
</script>

Raynos · Accepted Answer · 2012-01-23 11:29:58Z

3

Mixing CSS, JS or HTML together is a common anti-pattern. CSS goes in a styleSheet.

// in stylesheet .css
.new-class {
  opacity:0.94; 
  outline:none; 
  content:""; 
  display:block; 
  position:absolute; 
  top:20px; 
  left:50%; 
  margin:0 0 0 -5px; 
  width:0; 
  height:0; 
  line-height:0px; 
  font-size:0px;
}

JavaScript manipulates classes on elements.

// in javascript 
elem.classList.add("new-class");

As an aside your script is madness

// get each area
$('area').each(function (i) {
    // get them all again
    $('area').eq(i).bind('mouseover mousemove', function (e) {
        $('.1,.2,.3').eq(i).css({
            top: e.pageY + 10,
            left: e.pageX + 10
        }).show()
    })
    // and again. 
    $('area').eq(i).bind('mouseout', function () {
        $('.1,.2,.3').hide()
    })
})

Please cache your jQuery queries.

edited Jan 23, 2012 at 11:29

answered Jan 23, 2012 at 11:21

Raynos

170k57 gold badges359 silver badges399 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bojangles Over a year ago

The OP is using jQuery, so you could do $('.foo').css({ // Rules });, althoguh the OP did ask for pure JS.

Niklas B. Over a year ago

@JamWaffles: No, he just asked how to achieve what he wants, in which case it seems very appropriate to me to show him how this is done properly.

David Hellsing Over a year ago

Beware of browser inconsistencies you get when using f.ex opacity in a stylesheet versus using the jQuery normalized properties in their .css() api.

Raynos Over a year ago

Good point, jQuery has legacy browser fixes for some CSS properties. This may be of value

David Hellsing · Accepted Answer · 2012-01-23 11:32:00Z

0

You can create a stylesheet using javascript and insert it into the DOM like this:

var styles = '#elem { opacity:0.94; outline:none; content:""; }' // etc
var style = document.createElement( 'style' );

document.getElementsByTagName('head')[0].appendChild( style );

if ( style.styleSheet ) { // IE
    style.styleSheet.cssText = styles;
} else {
    var cssText = document.createTextNode( styles );
    style.appendChild( cssText );
}

Or, you can use the jQuery API to apply the styles to the element’s style attribute. You probably need to convert the styles to an object if you want to benefit the jQuery normalizations:

$('#elem').css({
    opacity: 0.94,
    outline: 'none',
    content:'' // etc
});

http://api.jquery.com/css/

edited Jan 23, 2012 at 11:32

answered Jan 23, 2012 at 11:26

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

5 Comments

Raynos Over a year ago

This should be avoided in favour od adding the style to your stylesheet statically. Also #elem is bad.

David Hellsing Over a year ago

Agreed, but I interpreted the question as if the OP wanted to use javascript to apply styles. And what is bad with #elem? It’s just an example...

Raynos Over a year ago

ids are evil also .css is even worse in terms of performance hits and generally introducing cancer to your code.

David Hellsing Over a year ago

@Raynos that’s just crazy talk. If you have a problem with using IDs that’s fine, but it’s not as if a blog post will change the W3C recommendations for HTML structures. Neither is that discussion relevant for this question at all.

Bart Bus Over a year ago

OK Guys, for the complete noob that I am, I am working at the project and it seems that I can get it working the way that I want. I chose to use David´s jQuery API solution, because I sort of understood what it was about. I already got the layout in the script similar to the one used in the Pure CSS example. Now I will try to get the tooltip arrow done too. THANK YOU VERY MUCH FOR YOUR HELP, ALL OF YOU, and especially David!

Collectives™ on Stack Overflow

add CSS to JavaScript

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related