Reading and Changing CSS Properties
In addition to manipulation of entire CSS class names we can directly change the CSS properties of a html element using the .css() function. For example we may want to change our popup div background to black: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20functions/ex10.js?actionable=true
To get the existing color of our page, we use: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20functions/ex11.js?actionable=true Notice the function changes but the number of arguments change depending on whether you are reading or writing attributes.
We store the color variable in the variable color and broadcast it to the user with alert()In most scenarios changing one CSS property is not enough. Jquery provides simple syntax to change multiple styles of the same element.
To change the popUp div's background and font size in one single line of code: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20functions/ex12.js?actionable=true {'background-color':'red', 'font-size': '200%'} is what we refer to as an object literal and we can add an arbitrary amount of styles using this format.
Another way of applying multiple styles would be to use jquery's function chaining ability that was described earlier: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20functions/ex13.js?actionable=true
$(document).ready(function(){
XT1
});
</script>
Live demo
<style>#buy{color:#baff00;} #buy:hover{text-decoration:underline;} .highlighter{background-color: rgb(186 255 0 / 17%);}</style><div id="minidivpage" class="example-live"><h1 class="heading">This is a heading</h1><div id="popUp" class="pop-up">POP UP DIV</div><h4 class="heading-4">Categories in a webflow list:</h4><ul role="list" class="list"><li>Location</li><li>Position</li><li>Level</li></ul><h3 id="title" class="heading-3">This is a title</h3><div class="highlighter"></div><a id="buy" target="_blank" href="#">Link</a></div>
$(document).ready(function() {
XT1
});
</script>
