jQuery
control css
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 pinkcoding, 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>
I'll check the results right below.
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. ^^
