How to dynamically modify css style with jquery

Methods for jquery to dynamically modify css styles: 1. Dynamically modify css styles through css methods; 2. Set a CSS style for the specified html element; 3. View the css style of the element; 4. Hide and show p or other specified html elements.

The operating environment of this article: Windows 7 system, jquery version 3.2.1, Dell G3 computer.

jquery implements a method of dynamically changing css styles.

The details are as follows:

jquery has almost become the standard JS library for developing WEB applications, which is inseparable from its simplicity and ease of use. As a back-end developer, when making some front-end pages, it is indispensable to master the control of CSS styles. If it is static CSS, of course it can be written directly, but some interfaces require some dynamic effects, such as color changes, font size changes, and even p hidden in reality, etc. These all require javascript to dynamically control their CSS styles. , the following is a summary of the commonly used jquery methods to control css styles.

1. Change the style of hyperlinks
2. Give a specified CSS style to the specified html element
3. View The css style of the element
4. Hide and show p or other specified html elements

1. Change the style of the hyperlink

$("#mylink a").css('color','#111111');
//这里选择器‘$("#mylink a")'表示ID为'#mylink'的元素下的所有链接。
//.css(‘color','#111111');表示把颜色设为'#111111'

2. Assign a defined CSS style to the specified html element

1. You can create a css style in an external css file, such as

.mystyle{width:200px;height:100px;}

and then use jquery to assign the value

$("#result").css(mystyle);

2. You can define a css object (that is, a javascript object) and then assign a value

var pcss = {
 background: '#EEE',
   width: '478px',
   margin: '10px 0 0',
   padding: '5px 10px',
   border: '1px solid #CCC'
};
$("#result").css(pcss);

This method is similar to the external link method. I personally recommend the external link method.

3. View the CSS style of the element

var mycolor=$("#mylink a").css("color");
if ($('#myp').css('display')=="none"){...}
//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

4. Hide in display p or other elements

1. Directly modify the CSS method

$('#myp').attr('style','display:none;');//隐藏
$('#myp').attr('style','display:block;');//显示

Recommended learning: "jquery video tutorial"

The above is the detailed content of How to dynamically modify css style with jquery. For more information, please follow other related articles on the PHP Chinese website!