关于JQuery中removeAttr方法的坑

最新推荐文章于 2022-06-10 21:00:34 发布

Momoko_W

最新推荐文章于 2022-06-10 21:00:34 发布

阅读量5.9k

点赞数

文章标签： html jquery

本文链接：https://blog.csdn.net/Momoko_W/article/details/81216277

版权

最近开始学习前端，想要设计一个类似csdn的博客，在阅读时可以先阅读部分内容，然后点击继续阅读按钮可以阅读剩下的部分，类似这样的
这里写图片描述

然后看了一下csdn的做法，发现这个包含文章内容的框设置了高度，所以剩下的文字被截去了，但是其实还是被加载在了网页中，只是没有显示出来。大体思路就是先把这个按钮绑定一个事件，在按下按钮后调用相应的方法函数。即在函数中移除高度的属性，那么，关键来了，它用到了这么一个方法：removeAttr()，在引用这个方法时一定要引入jQuery的包，在W3school中，这个函数的定义是这样的
这里写图片描述
好了，我就为我的文章框设置了500px的高度，剩下的部分就被隐藏了，然后在button上绑定了这个事件

<div id="article_content" class="article_content clearfix">
...文章内容...
<a id="btn-readmore"><button class="btn btn-info" onclick="btn_click()">阅读更多</button></a>

然后写了这个函数

<script>
            function btn_click() {
                var articleBox = $(".article_content");    //获取文章框的class
                //articleBox.css('height','800px');        //直接设置css属性也可以，但是不方便
                alert(articleBox.removeAttr('height')   ;
                console.log(articleBox.height);
                alert("btn_click被调用了!");
            };
        </script>

我就直接移除了height的属性，这下大功告成了吧，但是事情还没完，点击按钮后没有任何的变化，在控制台看到articleBox的高度任然还是500，这就奇怪了，不是可以消除属性吗，这下就让我蒙蔽了。
我继续在W3school里面找解决办法，发现里面的代码是这样的

$(document).ready(function(){
  $("button").click(function(){
    $("p").removeAttr("style");
  });
});
</script>
...
<p style="font-size:120%;color:red">这是一个段落。</p>

那会不会在removeAttr方法中制定元素的属性必须是类似class，style，id这些键值呢，我又尝试了一下，把函数中的remove方法更改成这样：

articleBox.removeAttr('class');

重新点击按钮，发现成功了！
在W3school中我尝试这样写：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").removeAttr("id");
  });
});
</script>
<style>
#pcolor {
font-size:120%;
color:red;
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<p id="pcolor">这是一个段落。</p>
<p>这是另一个段落。</p>
<button>删除所有 p 元素的 style 属性</button>
</body>
</html>

点击删除按钮后也成功了。
说了这么多，上面的都是废话，下面才是重点：
removeAttr的这个坑就是函数调用的参数只能是你想删除的属性的所对应的键值，如果你想删除.demo{height:500px;}中的height属性，那么调用的参数就是removeAttr(‘class’),这个class所对应的所有属性都会被移除，所以调用的参数也就只能是id,class,style等等，如果你想只删除一个属性，那么你就只能让id或者class只对应一个。

Momoko_W

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于JQuery中removeAttr方法的坑

最近开始学习前端，想要设计一个类似csdn的博客，在阅读时可以先阅读部分内容，然后点击继续阅读按钮可以阅读剩下的部分，类似这样的然后看了一下csdn的做法，发现这个包含文章内容的框设置了高度，所以剩下的文字被截去了，但是其实还是被加载在了网页中，只是没有显示出来。大体思路就是先把这个按钮绑定一个事件，在按下按钮后调用相应的方法函数。即在函数中移除高度的属性，那么，关键来了，它用到了这么一...
复制链接

扫一扫