jquery添加css
jQuery add method can be used to add elements, selectors or html to the matched elements.
jQuery add方法可用于将元素,选择器或html添加到匹配的元素。
jQuery add() (jQuery add())
jQuery add() method is very useful if you want to apply any jQuery function or add CSS to DOM elements in HTML.
如果您想应用任何jQuery函数或将CSS添加到HTML中的DOM元素,则jQuery add()方法非常有用。
Below example shows how we can use add()
to apply css styles to ‘table’, ‘p’ and ‘li’ DOM elements in a single line. Otherwise we had to apply styles on each element one by one. It also shows how can we add HTML to any DOM element.
下面的示例显示了如何使用add()
在一行中将CSS样式应用于“ table”,“ p”和“ li” DOM元素。 否则,我们必须在每个元素上一一应用样式。 它还显示了如何将HTML添加到任何DOM元素。
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
.styled{
border:1px black solid;
background-color: read;
border-collapse: collapse;
}
</style>
<script type="text/javascript">
function styleToggle(button) {
if (button.value == 'Add Style') {
//using add() we can apply css to all the elements at once
$('table').add('p').addClass('styled').add('li').css('background-color', 'red');
button.value = 'Remove Style';
} else {
//using removeAttr() to remove the styling
$('table').add('p').add('li').removeClass('styled').removeAttr('style');
button.value = 'Add Style';
}
$().add("<br><strong>appending html</strong>").appendTo("p:last");
}
</script>
<title>jQuery add() Example</title>
</head>
<body>
<strong>Employee Table</strong>
<br><br>
<table>
<tbody>
<tr>
<th>ID</th>
<th>NAME</th>
<th>ROLE</th>
</tr>
<tr>
<td>1</td>
<td>Pankaj</td>
<td>Developer</td>
</tr>
<tr>
<td>2</td>
<td>Mike</td>
<td>Manager</td>
</tr>
<tr>
<td>3</td>
<td>David</td>
<td>CEO</td>
</tr>
<tr>
<td>4</td>
<td>Lisa</td>
<td>Support</td>
</tr>
</tbody>
</table>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<p>A Paragraph</p>
<p>Last Paragraph</p>
<br>
<input type="button" value="Add Style" onclick="styleToggle(this)"></input>
</body>
</html>
jQuery添加CSS –自己尝试 (jQuery add css – Try it Yourself)
Here are the screenshots of HTML page when we click on the button multiple times.
这是当我们多次单击按钮时HTML页面的屏幕截图。
After clicking on “Add Style” button for first time.
首次单击“添加样式”按钮后。
After clicking on “Remove Style” button for first time.
第一次单击“删除样式”按钮后。
翻译自: https://www.journaldev.com/1028/jquery-add-css-add-html-element
jquery添加css