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

9rnv2umw  于 2022-12-20  发布在  其他
关注(0)|答案(1)|浏览(86)

有没有办法应用条件显示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"属性内的身体标记。不总是激活。

v8wbuo2f

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>

相关问题