JavaScript - スタイルを削除

<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

      .test {
            background: #ff4040;
            color: #fff;
            display: block;
            font-size: 15px;
      }

こんにちは、私はCSSまたは単純なJavaScriptを使用して最後の3 divから背景色を削除する必要があります。条件は、最後の3つのdivからスタイルを削除するだけでよく、使用しているdiv数に関係なく、ほとんどすべてのブラウザでサポートされるはずです。あなたは私を助けてくれる?

3

10 答え

簡単な解決法

あなたはを使用して最後の3DIVを選択することができます。

.test:nth-last-child(-n+3) {
    /*declarations*/
}
4
追加された
訂正してくれてありがとう。
追加された 著者 Thanveer Shah,

JavaScriptを使う:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

[...document.querySelectorAll('.test')]
  .splice(-3)
  .forEach(el => el.classList.remove('test'));
.test {
  background: #ff4040;
  color: #fff;
  display: block;
  font-size: 15px;
}
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>
</div> </div>
0
追加された

ここでは、スタイルを変更するために別のCSSクラスを作成しました。この場合は背景色を削除するだけです。

JavaScriptを使用して、新しいクラスを追加して古いクラスを削除するたびにそのクラスの最後の要素を3回繰り返し、背景が消えています。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

let element = document.getElementsByClassName("test");
let elementsToRemoveBg = 3;
while (elementsToRemoveBg--){
  element[element.length-1].classList.add("test-no-bg");
  element[element.length-1].classList.remove("test");
}
.test {
  background: #ff4040;
  color: #fff;
  display: block;
  font-size: 15px;
}
.test-no-bg {
  color: #fff;
  display: block;
  font-size: 15px;
}
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>
</div> </div>
0
追加された

CSSのみで、3回目以降のすべてを選択したい場合

  .test:nth-child(n+3) {
        background: none;
  }

https://www.w3schools.com/cssref/sel_nth-child.asp

0
追加された

:nth-​​last-child()セレクタを試してください。

Soruce: https://www.w3schools.com/cssref/sel_nth-last-child.asp

0
追加された
こんにちはMarlaqk、私はn番目の子供の財産はここでは動作しませんと思います。最後の3 divからスタイルを削除する必要があります。そして、何個のdivを使うのかは問題ではありません。スクリプトやCSSを使用しているdivの数がいくつであっても、最後の3 divにしか影響しません。
追加された 著者 Bst_coder,
あるいは、divごとに別々のクラスを追加し、最後の3つのdivからこの別々のクラスを削除するためのJavaScriptコードを書くこともできます。しかし、私はそれがどのように行われるのかわかりません。
追加された 著者 Bst_coder,

次のコードを使用すると、行数が減ります。最後の3つの要素に個別のCSSコードを記述する必要はありません。

    body .test:not(:nth-last-child(-n+3)) {
        background: #ff4040;
        color: #fff;
        display: block;
        font-size: 15px;
  }
0
追加された

簡単な解決策もっと削除したい場合は、ループとして配置できます。

var e=document.querySelectorAll('.test');


e[e.length-1].classList.remove('test')
e[e.length-2].classList.remove('test')
e[e.length-3].classList.remove('test')
0
追加された

簡単な解決策もっと削除したい場合は、ループとして配置できます。

var e=document.querySelectorAll('.test');


e[e.length-1].classList.remove('test')
e[e.length-2].classList.remove('test')
e[e.length-3].classList.remove('test')
0
追加された

最も美しい方法ではありませんが、魅力のように機能します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

<script>
    $(document).ready(function(){
        let $count = $('.test').length;
        let i = 0;
        $('.test').each(function(key,val){
            if(i == Number($count - 3) || i == Number($count - 2) || i == Number($count - 1)){
                $(val).css({'background':'none','color':'black'});
            }
            i++;
        });
    });
</script>
0
追加された
ありがとうJaapaap、もう1つの機能を使ってこのコードを編集できますか。
追加された 著者 Bst_coder,
すべてのdivに別々のクラスを追加するつもりですが、最後の行に配置されたdivからそれを削除する必要があります。それは3 div、2 div、または1 divです。
追加された 著者 Bst_coder,
確かに@Bst_coder
追加された 著者 Jaapaap,
@Bst_coderはhtmlとjsfiddleを送信し、そして私は私ができることがわかります:)
追加された 著者 Jaapaap,

これはあなたのために働くでしょう、

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.test:not(:nth-child(n+4)) {
    background: #ff4040;
    color: #fff;
    display: block;
    font-size: 15px;
}
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>
</div> </div>
0
追加された
ママ、彼は最初の3ではなく、最後の3 DIVを望んでいる
追加された 著者 Thanveer Shah,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript