Question

有没有办法让CSS只适用于页面的一部分？然后我可以通过使用javascript控制应用的金额？比如说我有一个50％的滑块，我希望CSS格式只适用于这样的一半页面。

永远不会放弃

永远不会让你失望

永远不要跑来跑去，抛弃你

的

永远不会让你哭泣

永远不要说再见

永远不会跑来跑去伤害你

然后如果我把滑块说成90％我会得到

永远不会放弃

永远不会让你失望

永远不要跑来跑去，抛弃你

永远不会让你哭泣

永远不要说再见

的

永远不会跑来跑去伤害你

Answer 1

CSS可以应用于body的任何部分，但您需要对HTML进行结构化，以便可以独立于其他内容找到要设置样式的部分。

如果您想一次突出显示一行歌词，那么每行都需要能够作为一个单元找到，如下所示：

＆＃13;

// Get all the div elements that represent lines of lyrics into an array
var lyrics = Array.prototype.slice.call(document.querySelectorAll(".lyric"));

// Get a reference to the range control:
var slider = document.getElementById("styleLyrics")

// Set up an event handler for the range control's input event
slider.addEventListener("input", function(evt){
  // Loop over each line in the lyrics
  lyrics.forEach(function(v, i){
    // If the slider's value is valid...
    if(i <= slider.value){
      // Apply a pre-made style to the line
      v.classList.add("highlighted");
    } else {
      // Remove the style
      v.classList.remove("highlighted");
    }
  });
});

＆＃13;

.highlighted {
  background-color:yellow;
  font-weight:bold;
}

＆＃13;

<div class="lyric">Never gonna give you up</div>
<div class="lyric">Never gonna let you down</div>
<div class="lyric">Never gonna run around and desert you</div>
<div class="lyric">Never gonna make you cry</div>
<div class="lyric">Never gonna say goodbye</div>
<div class="lyric">Never gonna run around and hurt you</div>
<input type="range" id="styleLyrics" min="-1" max="5" value="-1">

＆＃13;

如果您想要逐个对每个字母或单词应用样式，那么您必须将这些内容与HTML隔离，就像上面的行一样：

＆＃13;

// Get all the span elements that represent word in the lyrics into an array
var lyrics = Array.prototype.slice.call(document.querySelectorAll(".word"));

// Get a reference to the range control:
var slider = document.getElementById("styleLyrics")

// Set up an event handler for the range control's input event
slider.addEventListener("input", function(evt){
  // Loop over each word
  lyrics.forEach(function(v, i){
    // If the slider's value is valid...
    if(i <= slider.value){
      // Apply a pre-made style to the word
      v.classList.add("highlighted");
    } else {
      // Remove the style
      v.classList.remove("highlighted");
    }
  });
});

＆＃13;

.highlighted {
  background-color:yellow;
  font-weight:bold;
}

＆＃13;

<div class="lyric">
  <span class="word">Never</span>
  <span class="word">gonna</span>
  <span class="word">give</span>
  <span class="word">you</span>
  <span class="word">up</span>
</div>

<input type="range" id="styleLyrics" min="-1" max="5" value="-1">

＆＃13;

您甚至可以自动创建HTML，因此静态编写也不会那么繁琐：

＆＃13;

// Create an array that contains each line of the song:
var lyrics = [
  "Never going to give you up", 
  "Never gonna let you down", 
  "Never gonna run around and desert you", 
  "Never gonna make you cry", 
  "Never gonna say goodbye", 
  "Never gonna run around and hurt you",   
];

// Get a reference to the output area:
var song = document.getElementById("song");

// will hold the string of output
var output = "";

// Loop through the array (lines of the song):
lyrics.forEach(function(line, index){
  // Begin building a new div for each line of the song
  output += "<div class='line'>";
  // Loop over each word in the line by splitting the string at each space
  // (which returns an array) and then loop over that
  line.split(" ").forEach(function(word){
    // Add a span to contain each word
    output += "<span class='word'>" + word + " </span>";
  });
  // Finish up the line
  output += "</div>";
});

// Inject the string into the output area
song.innerHTML = output;

// Get a reference to the range control:
var slider = document.getElementById("styleLyrics")

// Get all the lines into an array
var allLines = Array.prototype.slice.call(document.querySelectorAll(".line"));

// Set up an event handler for the range control's input event
slider.addEventListener("input", function(evt){
  // Loop over each word
  allLines.forEach(function(v, i){
    // If the slider's value is valid...
    if(i <= slider.value){
      // Apply a pre-made style to the word
      v.classList.add("highlighted");
    } else {
      // Remove the style
      v.classList.remove("highlighted");
    }
  });
});

＆＃13;

body {
  font-family:sans-serif;
  letter-spacing:.1em;
}

.line {
  margin:.5em 0;
  line-height:1.2;
}

.highlighted {
  background-color:yellow;
  font-weight:bold;
}

＆＃13;

<div id="song"></div>

<input type="range" id="styleLyrics" min="-1" max="5" value="-1">

＆＃13;

Answer 2

如果您使用JavaScript，则可以近距离接触。这不是自动的。它的工作方式是使用HTML格式的滑块：<input type="range" id="slide">。现在，您需要使用JavaScript来获取此滑块的值：var slide = document.getElementById("slide").value;。

现在你可以使用一些花哨的if语句来改变元素的CSS。我不会让我感到复杂，但你可以把它变得像你想要的一样复杂。

var slide = document.getElementById("slide");

slide.oninput = function() {
  if (this.value < 50) {
    document.getElementById("1").style.fontWeight = "bold";
    document.getElementById("2").style.fontWeight = "normal";
  }
  if (this.value > 50) {
    document.getElementById("2").style.fontWeight = "bold";
    document.getElementById("1").style.fontWeight = "bold";
  }
}

<input type="range" id="slide" min="1" max="100" value="50">

<p id="1" style="font-weight:normal;">1</p>
<p id="2" style="font-weight:normal;">2</p>

如果您还需要其他任何东西，可以查看更多内容。

有没有办法只将CSS应用于页面的一部分？

2 个答案: