Question

我是javascript的初学者。我希望在屏幕大小小于760px时删除data-toggle属性并使href工作。我不知道如何删除data-toggle属性，下面是我的代码：

<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
    <div class="portfolio-wrapper">                     
        <a data-toggle="modal" data-target="#myModal1" href="http://www.example.com/main/includes/onepager/business_service/example/index.php" class="b-link-stripe b-animate-go thickbox">
            <img class="p-img" src="http://www.example.com/theme/mobile-page-files/web/images/small-portfolio/example.JPG" />
            <div class="b-wrapper">
                <h2 class="b-animate b-from-left b-delay03">
                    <img src="http://www.example.com/theme/mobile-page-files/web/images/link-ico.png" alt=""/>
                </h2>
            </div>
        </a>
    </div>
    <div class="port-info">
        <h4>
            <a href="http://www.example.com/main/includes/onepager/business_service/example/index.php"> Example</a>
        </h4>
    </div>
</div

Answer 1

您可以使用一些jQuery ...不要忘记更新选择器ELEMENTID

if($(window).width() < 760){
     $('#ELEMENTID').find('a').removeAttr('data-toggle');
}

Answer 2

在页面底部（就在</body>标记之前）添加以下代码：

if(window.innerWidth < 760){
    document.getElementsByTagName("a")[0].removeAttribute("data-toggle");
}

Answer 3

当屏幕宽度可能再次大于760时，没人会解决这个问题。我们必须重新添加数据属性。

window.addEventListener("resize", resizeHandler);

function resizeHandler() {
  var winWidth  = window.innerWidth,
      threshold = 760,
      els       = document.getElementsByClassName('thickbox');

  [].forEach.call(els, function (el) {   
    if (winWidth < threshold) {
      el.removeAttribute("data-toggle");
    } else {
      el.setAttribute("data-toggle", "bar");
    }  
  });
}

查看这个小小的演示，看看它的实际效果。 http://codepen.io/antibland/pen/reZNNO

如何在特定窗口大小中删除data-toggle =“modal”？

3 个答案: