css 如何添加条件数据属性标签激活js代码？

9rnv2umw 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(85)

有没有办法应用条件显示Javascript或Jquery代码在HTML模板？
例如，如果body标记中有任何包含"no-copy"值的data-id属性，则将应用一些javascript代码。
例如，如果有任何ID的名称为"no-copy"，一些javascript代码块将应用于主题。
如果我解释得更容易，我有一些不从我的网站复制文本/内容的js代码。也禁用ctrl + U和右键单击。我想在我的代码中应用它们，但有条件。如果用户添加内体标记data-id ="no-copy"属性，我的代码（禁用右键，选择文本等）将被应用或激活。否则这些代码将无法工作。
下面是我的简单方法：

let  = document.getElementById("divId").getAttribute("data-no-copy");
    function customAlert(message){
        $('[data-no-copy="active"]').html(message).fadeIn(300).delay(2000).fadeOut(400);
    };
    document.addEventListener("contextmenu", function(event){
    event.preventDefault();
    customAlert('Right Click is Disabled');    
    }, false);

<style type="text/css">
    #divId {
      max-width: 300px; 
      background-color: #333; 
      color: #fff; 
      font-size: 15px;
      text-align: center;
      border-radius: 2px; 
      padding: 10px; 
      position: fixed; 
      z-index: 1; 
      right: 5%; 
      bottom: 20px; 
      display: none;
    }
    </style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>   
    
<body id="divId" data-no-copy="active"></body>

我如何才能激活此代码只有当用户将添加data-id ="no-copy"属性内的身体标记。不总是激活。

css

来源：https://stackoverflow.com/questions/74851391/how-to-add-conditional-data-attribute-tag-to-activate-js-code

1条答案

按热度按时间

v8wbuo2f1#

你可以检查数据属性值，就像我在我的例子中所做的那样，如果数据属性值与你的字符串匹配（例如，'active'），你可以触发例程来避免右击和复制，就像这个例子：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #divId {
        max-width: 300px; 
        background-color: #333; 
        color: #fff; 
        font-size: 15px;
        text-align: center;
        border-radius: 2px; 
        padding: 10px; 
        position: fixed; 
        z-index: 1; 
        right: 5%; 
        bottom: 20px; 
      }
      </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>   
    
  </head>
  <body id="divId" data-no-copy="active">

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

  <script>
      let  no_copy = document.getElementById("divId").getAttribute("data-no-copy");

      if(no_copy == 'active') {
        document.addEventListener("contextmenu", function(event){
        event.preventDefault();
        alert('Right Click is Disabled');    
        }, false);
        $(document).ready(function() {
          $('body').bind('copy', function(event) {
            event.preventDefault();
            alert('Copy is Disabled');  
          });
        });
      }
  </script>
  </body>
</html>

赞(0）回复(0）举报 2022-12-20

我来回答

css 如何添加条件数据属性标签激活js代码？

1条答案

相关问题

热门标签

最新问答