Changing css value with jQuery
You can also change the css value using jQuery.
For example, a div with a horizontal value of 100px can be changed to 500px. using jQuery !!!!
$('SELECTOR').css();
If you are watching this course, I am going through the html css course at coreasur, and I am looking at this jQuery course, so I think you know css.
How do I specify font color values in css?
selector{color:red}
So in jQuery?
$('SELECTOR').css('color','red');
It is expressed as above. css ('CSS attribute', 'value');
So let's learn by example.
situation 1
Let's make the phrase 100px, 200px, 300px and make the horizontal value of a specific div change to 100px, 200px, 300px when clicked ^^
Now that we have studied variable declarations, let's declare them.
$(function(){ var box = $('.box'); var btn_100px = $('.btn_100px'); var btn_200px = $('.btn_200px'); var btn_300px = $('.btn_300px'); btn_100px.click(function(){ box.css('width','100px'); }); btn_200px.click(function(){ box.css('width','200px'); }); btn_300px.click(function(){ box.css('width','300px'); }); });
Write the source as above.
So let's size the box 50px wide by 20px high and the background yellow.
css source : .box{width:50px;height:20px;background:yellow} .btn{cursor:pointer} html source : <div class="box"></div> <p class="btn btn_100px">100px</p> <p class="btn btn_200px">200px</p> <p class="btn btn_300px">300px</p>
Let's test and learn through hands-on examples.
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>jQuery</title> <style> .box{width:50px;height:20px;background:yellow} .btn{cursor:pointer} </style> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script> <script type="text/javascript"> $(function(){ var box = $('.box'); var btn_100px = $('.btn_100px'); var btn_200px = $('.btn_200px'); var btn_300px = $('.btn_300px'); btn_100px.click(function(){ box.css('width','100px'); }); btn_200px.click(function(){ box.css('width','200px'); }); btn_300px.click(function(){ box.css('width','300px'); }); }); </script> </head> <body> <div class="box"></div> <p class="btn btn_100px">100px</p> <p class="btn btn_200px">200px</p> <p class="btn btn_300px">300px</p> </body> </html>
It is possible to control css with jQuery like this.
float, display, width, height, color, background, margin, padding, etc.
Available.
Practice by controlling various css elements yourself. ^^