Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to dynamically modify css style in jquery", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let Xiaobian take you to learn "how to dynamically modify css style in jquery"!

jquery dynamically modify css style methods: 1, dynamically modify css style through css method;2, set a CSS style for the specified html element;3, view the css style of the element;4, hide and display p or other specified html elements.

Jquery implements methods for 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, CSS style control is essential when doing some front-end pages. If it is static CSS, of course, it can be written directly, but some interfaces need some dynamic effects, such as color changes, font size changes, and even p hidden in reality, etc. These all need to use javascript to dynamically control their CSS styles. Here is a summary of the commonly used jquery methods to control CSS styles.

1. Change the style of hyperlinks

2. Assigns a specified CSS style to the specified html element

3. View css styles for elements

4. hide and show p or other html elements specified

1. Change the style of hyperlinks

$("#mylink a").css ('color ','#11111');//Here selector '$("#mylink a")' indicates all links under element ID '#mylink'.//. css ('color ','#11111'); indicates that the color is set to '#11111'

Specify a CSS style for the specified html element

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

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

Then assign it with jquery

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

2. You can define a CSS object (i.e. javascript object) and assign it

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

This approach is similar to the external link approach, the personal recommendation external link approach.

3. View CSS styles for elements

var mycolor=$("#mylink a").css("color");if ($('#myp').css('display')=="none"){...}// Similar to the first example, but here we pass only one parameter (style attribute)

4. Hide from display p or other elements

1. Directly modify CSS mode

$('#myp').attr ('style ','display:none;');//Hide $('#myp').attr ('style','display:block;');//Show here, I believe you have a deeper understanding of "how to dynamically modify css style in jquery", you may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.