Change CSS properties, this has caused problems with some properties, and if so use the second method as shown under this next code.
|
1 2 3 4 5 6 7 8 |
$('#successMessage').css( { left: '580px', top: '250px', width: 0, height: 0 } ); |
If you have problems use this code, each property separately.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Stop displaying a div/element $('.slidingDiv2').css({"display":"none"}); Change the width of a div/element $(".slidingDiv2").css("width") == "95%"); Change paragraph text colour to green $('p').css({"color":"green"}); Float all divs with class .left $('div.left').css('float'); Change all elements with class .bg-red to have a red background $('.bg-red').css({"background-color":"red"}); Change the image $('.scrollbutton').css("background-image", "url(images/upscroll.png)"); |
|
1 2 3 4 5 6 7 |
$('.container-twelve').css('height', '377px'); $('.four.columns').css('height', '377px'); //or document.getElementById('formID').style.left = "-109%"; document.getElementById('formID').style.border= "2px solid"; |
Change CSS Class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html> <head> <style type="text/css"> .highlight { background:cyan; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <h1>jQuery add / remove css class example</h1> <p id="para1">This is paragraph 1</p> <p>This is paragraph 2</p> <p>This is paragraph 3</p> <p>This is paragraph 4</p> <button id="addClass">Add highlight</button> <button id="removeClass">Remove highlight</button> <script type="text/javascript"> $("#addClass").click(function () { $('#para1').addClass('highlight'); }); $("#removeClass").click(function () { $('#para1').removeClass('highlight'); }); </script> </body> </html> |
