Home > Article > Web Front-end > How to remove border style in jquery
Two methods: 1. Use css() to set the border attribute value to "none", and the syntax is "specify element.css("border","none")". 2. Use attr() to add a new style and overwrite the old style. The syntax is "specify element.attr("style","border:none")".
The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.
In jquery, you can remove the border style by setting the value of the border attribute to "none" through the built-in method.
Two methods to remove border:
1. Use css() to set the value of the border attribute to "none"
css() method can set one or more style attributes of the matched element.
Remove syntax:
$(selector).css("border","none")Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").bind("click", function() {
$("p").css("border","none");
});
});
</script>
<style>
p{
border: 2px solid red;
background-color: pink;
}
</style>
</head>
<body>
<button>去掉border样式</button>
<p>这是一个p段落</p>
<p>这是一个p段落</p>
</body>
</html>##2. Use attr() to add "border:none" New style, overwriting the old style
attr() method can set the attribute value of the selected element. Use the attr() method to set the style attribute and add a new inline style of "border:none".
$(document).ready(function() {
$("button").bind("click", function() {
$("p").attr("style","border:none");
});
});
jQuery video tutorial, web front-end video】
The above is the detailed content of How to remove border style in jquery. For more information, please follow other related articles on the PHP Chinese website!