您的位置：首页 > Web前端 > CSS

添加删除元素，addClass, removeClass, css

2017-05-12 11:42 417 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(function () {

$('#but').click(function (event) {
//append   prepend 内部添加
//                $('.container').append('<b>粗体</b>')// 测试文本粗体测试文本 粗体粗体粗体
//                $('.container').prepend('<b>粗体</b>')//粗体粗体粗体粗体 测试文本粗体测试文本
//                before  after 外面添加
//                $('img').before('<b>粗体</b>')//
//                $('img').after('<b>粗体</b>')//

//                remove() - 删除被选元素（及其子元素）
//                $('.container').remove()
//                empty() - 从被选元素中删除子元素
//                $('.container').empty()

//                删除 class="italic" 的所有 <p> 元素
//                $("p").remove(".italic");

//                $("p,div").addClass("blue");
//                $("p,div").removeClass("blue");
//                $("p,div").toggleClass("blue");

//              background-color等不用驼峰式写法
//                $("p").css(
//                    {
//                        "background-color":"yellow",
//                        "font-size":"200%"
//                    }
//                );

})

});
</script>
</head>
<body>
<button id="but">
按钮
</button>

<div class="container">
<img src="http://img3.redocn.com/tupian/20151016/mengchongxiaotuzi_5102602.jpg" >
</div>

<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<div>div...</div>

</body>

<style>

.container {
background-color: gray;
width: 200px;
height: 140px;
display: flex;
flex-direction: row;
background-color: gray;
}

.blue
{
color:blue;
}
</style>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航