happy cat image

Start Web Coding

Your First step toward web coding,
Start Web Coding

change UI

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-2.1.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. ^^

강좌로 돌아가기