EVERDEVEL

UI changes

Set the UI that suits you according to the screen size.
May not work in mobile environment.

EVERDEVEL

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 everdevel, 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. ^^

next course is
fade in out effect

Thank you for visiting. If you have any inquiry or explanation of mistakes, please use the comments below.

open new window

Back to the course