Jquery css function to dynamically manipulate the style of DOM nodes
- 高洛峰Original
- 2016-11-24 09:36:181523browse
The css function in JQuery can set effects for DOM nodes. CSS functions generally have the following uses:
1. Determine whether an object is hidden:
$("#id").css("display")=="none " ;
Second, set the value of a style attribute in all matching elements:
$("div").css("color","#FF0000");
Three, put a "name/value pair" Object set to the style properties of all matching elements. This is the best way to set a large number of style
attributes on all matching elements:
$("div").css({ color: "#ff0000", background: "blue" });
If the attribute name If it contains "-", you must use quotation marks:
$("div").css({ "margin-left": "10px", "background-color": "blue" });
Here are some of what I wrote demo code.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="author" content="LuisZhang">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
// $("div").click(function() { alert($(this).next("div").text()); });
// $("div").click(function() { alert($(this).nextAll("div").text()); });
// $("div").click(function() { $.each($(this).nextAll("div"), function() { $(this).css("background", "red") }); });
$("p").click(function() { $.each($(this).nextAll("p"), function() { $(this).css("background", "#abccdd") }); });
$("div").click(function() { $.each($(this).next("div"), function() { $(this).css({ "margin-left": "10px", color: "#abccdd", background: "blue" }) }); });
$("#fristDiv").click(function() { $.each($(this), function() { $(this).css({ "margin-left": "10px", color: "#abccdd", background: "blue" }) }); });
$("#lastDiv").click(function() { $.each($(this), function() { $(this).css({ "margin-left": "10px", color: "#abccdd", background: "blue" }) }); });
});
</script>
</head>
<body>
<div id="fristDiv">aa</div>
<div>bb</div>
<div>cc</div>
<div>dd</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<div id="lastDiv">ee</div>
</body>
</html>Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery controls css absolute positioning position effects, such as moving the mouse to the icon display layer to display relevant informationNext article：jquery controls css absolute positioning position effects, such as moving the mouse to the icon display layer to display relevant information