Use jQuery to implement dynamic style conversion-JS Tutorial-php.cn

Use jQuery to implement dynamic style conversion

WBOY

Release： 2024-02-23 17:39:06

Original

653 people have browsed it

Use jQuery to implement dynamic style conversion

Using jQuery to achieve dynamic style changes

jQuery is a popular JavaScript library that provides rich functions to simplify DOM operations, handle events, achieve animation effects, etc. . Among them, realizing dynamic style changes is one of the commonly used functions of jQuery. This article will introduce how to use jQuery to achieve dynamic style changes and provide specific code examples.

1. Basic concepts

In jQuery, select elements through selectors, and then use related methods to modify the style of the elements. Common style attributes include color, size, background, etc. By changing the values of these attributes, dynamic style changes can be achieved.

2. Basic operations

Change text color

You can change the style attributes of elements through jQuery’s css() method. For example, the following code can change the color of the text when a button is clicked:

<!DOCTYPE html>
<html>
<head>
  <title>动态样式变化</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#changeColorBtn").click(function(){
        $(".text").css("color", "red");
      });
    });
  </script>
</head>
<body>
  <div class="text">这是一段文本</div>
  <button id="changeColorBtn">改变颜色</button>
</body>
</html>

Copy after login

Change the background color

Similarly, changing the background color of an element is also a very common style change. operate. The following code changes the background color when the button is clicked:

<!DOCTYPE html>
<html>
<head>
  <title>动态样式变化</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#changeBgColorBtn").click(function(){
        $(".text").css("background-color", "blue");
      });
    });
  </script>
</head>
<body>
  <div class="text">这是一段文本</div>
  <button id="changeBgColorBtn">改变背景颜色</button>
</body>
</html>

Copy after login

The above two examples demonstrate how to use jQuery to achieve dynamic style changes that change the text color and background color when the button is clicked.

3. Other common style changes

In addition to changing the color and background color, jQuery can also be used to achieve dynamic changes in various other styles, such as changing the size, position, font style, etc. of elements. Here are some examples of other common style change operations:

Change element size

$(".text").css("font-size", "20px");

Copy after login

Hide/Show element

$(".text").hide();
$(".text").show();

Copy after login

Change element position

$(".text").css("position", "relative").animate({left: '250px'});

Copy after login

Through the above examples, you can use jQuery to achieve various dynamic style changes as needed to make the page more lively and interesting.

4. Summary

Using jQuery to achieve dynamic style changes is a commonly used technique in web development. Through simple code operations, various cool style effects can be achieved. This article introduces how to change text color, background color and other styles through jQuery, and provides specific code examples. I hope it is helpful to you, welcome to try and further explore the various functions of jQuery!

The above is the detailed content of Use jQuery to implement dynamic style conversion. For more information, please follow other related articles on the PHP Chinese website!