Question

如果我有如下所示的html代码：

  <section class="services page-spy" id="services">
      <div class="container">
        <div class="row">
          <!-- Start Mobile Slider Content-->
          <div class="col-lg-7 col-md-12 order-lg-7 order-md-12 rotate-inner wow fadeInLeft" data-wow-duration="1s">
            <div class="rotate-content">
              <!-- Start Slider Links-->
              <ul class="nav nav-pills mobile-nav-pills nav-stacked">
                <li class="active-icon" data-owl-item="0"><a href="#tab_a" data-toggle="pill"><i class="lni-support"></i></a></li>
                <li data-owl-item="1"><a href="#tab_b" data-toggle="pill"><i class="lni-cloud-download"></i></a></li>
                <li data-owl-item="2"><a href="#tab_c" data-toggle="pill"><i class="lni-bar-chart"></i></a></li>
                <li data-owl-item="3"><a href="#tab_d" data-toggle="pill"><i class="lni-world"></i></a></li>
                <li data-owl-item="4"><a href="#tab_e" data-toggle="pill"><i class="lni-mobile"></i></a></li>
                <li data-owl-item="5"><a href="#tab_f" data-toggle="pill"><i class="lni-gallery"></i></a></li>
                <li data-owl-item="6"><a href="#tab_g" data-toggle="pill"><i class="lni-user"></i></a></li>
                <li data-owl-item="7"><a href="#tab_h" data-toggle="pill"><i class="lni-bulb"></i></a></li>
                <li data-owl-item="8"><a href="#tab_i" data-toggle="pill"><i class="lni-cog"></i></a></li>
                <li data-owl-item="9"><a href="#tab_j" data-toggle="pill"><i class="lni-link"></i></a></li>
                <li data-owl-item="10"><a href="#tab_k" data-toggle="pill"><i class="lni-layers"></i></a></li>
                <li data-owl-item="11"><a href="#tab_l" data-toggle="pill"><i class="lni-anchor"></i></a></li>
              </ul>
              
              </div>
              </div>
              
              </div>
              
              </section>

如果我有一些文件可以像下面那样应用javascript或CSS

<script src="test/app.js"></script>
    	<script src="test/plugins.min.js"></script>
      <link rel="stylesheet" href="style.css">

例如，如果css文件中所有节或div都已设置样式，

是否有可能不将css或javascript应用到特定部分或div中，而只使用该部分的样式和脚本呢？

Answer 1

如果您要删除DOM元素的JavaScript行为，则可能会影响类的行为/操作，将类添加到您的元素中，并在某些情况下删除该元素的类

以下是执行此操作的示例：https://www.w3schools.com/howto/howto_js_remove_class.asp

告诉我您是否需要

Answer 2

您可以尝试一下，

let classes = ['red', 'blue', 'black', 'tomato', 'cornflowerblue'];
let counter = 0;

function toggleClass(){
  if(counter < classes.length){
    document.getElementById('div1').style.backgroundColor = classes[counter];
    document.getElementById('div2').style.backgroundColor = classes[counter];
    document.getElementById('div3').style.backgroundColor = classes[counter];
    
    counter++;
  }else{
    counter = 0;
    toggleClass();
  }
}

#div1{
  width: 50px;
  height: 50px;
  margin: 10px;
  transition: all 0.5s linear;
  border: 1px solid grey;
}

#div2{
  width: 50px;
  height: 50px;
  margin: 10px;
  transition: all 0.5s linear;
  border: 1px solid grey;
  border-radius: 50%;
}

#div3{
  width: 50px;
  height: 50px;
  margin: 20px 10px;
  transition: all 0.5s linear;
  border: 1px solid grey;
  transform: rotate(45deg);
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>


<button id="btn" onclick="toggleClass()">Change Color Class</button>

以上是动态内联样式的示例。您可以拥有自己的css类，并可以使用element上下文添加和删除它们。要添加和删除CSS类，您可以尝试使用

// Adding CSS class
document.getElementById('div1').classList.add("mystyle");

// Removing CSS class
document.getElementById('div1').classList.remove("mystyle");

“ mystyle”将是CSS类，

.mystyle {
  background-color: red;
  width: 100px;
  height: 100px;
 }

Answer 3

您可以像这样有条件地包含您的js和CSS文件：

var element = document.getElementsByClassName('your_element_class');

if (element)
{
  // Do nothing if element exists with class
}
else
{
  var head = document.getElementsByTagName('head')[0];

  var js = document.createElement("script");
  js.type = "text/javascript";  
  js.src = "your_script.js";  
  head.appendChild(js);

  var css = document.createElement("link");
  css.type = "text/css";  
  css.href = 'your_styles.css';
  css.rel = 'stylesheet';
  head.appendChild(css);
}

是否有可能将javascript或CSS清除为特定部分或div

3 个答案: