Quizgum : 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 quizgum, 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. ^^

QUIZGUM

Coding Class

Quizgum : control css

Changing css value with jQuery