জাভাস্ক্রিপ্ট - শৈলী সরান

<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 বা সহজ জাভাস্ক্রিপ্ট ব্যবহার করে শেষ তিন divs থেকে ব্যাকগ্রাউন্ড রঙ অপসারণ করতে হবে। শর্তাবলী আমি শুধুমাত্র গত তিন divs থেকে শৈলী অপসারণ করতে হবে এবং এটা আমরা ব্যবহার করা হয় কত divs ব্যাপার না এবং এটি প্রায় প্রতিটি ব্রাউজারে সমর্থন করা উচিত। আপনি কি আমাকে সাহায্য করতে পারেন?

3

10 উত্তর

একটি সহজ সমাধান।

আপনি ব্যবহার করে শেষ 3div নির্বাচন করতে পারেন।

.test:nth-last-child(-n+3) {
    /*declarations*/
}
4
যোগ
আমি আপনাকে সংশোধন না বলছি।
যোগ লেখক Thanveer Shah, উৎস

জাভাস্ক্রিপ্ট ব্যবহার করে

<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 ক্লাস তৈরি করেছি, এই ক্ষেত্রে শুধু পটভূমি রঙটি সরান।

আমি বার্সার সর্বশেষ উপাদানটি বারবার নতুন ক্লাস যোগ করার জন্য এবং পুরানো বর্গটিকে সরিয়ে দেওয়ার জন্য যেটি ব্যাকগ্রাউন্ডটি এখন চলে গেছে সেটি পুনরাবৃত্তি করার জন্য আমি জাভাস্ক্রিপ্ট ব্যবহার করি।

<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
যোগ

কেবলমাত্র সিএসএসের সাথে, যদি আপনি তৃতীয়টি পরে সবাইকে নির্বাচন করতে চান

  .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
যোগ
হেই মার্লাক, আমি মনে করি, নবম সন্তানের সম্পত্তি এখানে কাজ করবে না। আমি গত 3 divs থেকে শৈলী অপসারণ করতে হবে। এবং এটি ব্যবহার করা যাচ্ছে না কত divs ব্যাপার। Divs সংখ্যা যাই হোক না কেন আমরা আমাদের স্ক্রিপ্ট বা CSS ব্যবহার করা হয় শুধুমাত্র শেষ 3 divs প্রভাবিত করা উচিত।
যোগ লেখক Bst_coder, উৎস
অথবা আমরা প্রতিটি divs জন্য পৃথক শ্রেণী যোগ করতে পারেন এবং আমরা গত তিন divs থেকে এই পৃথক শ্রেণী অপসারণ করতে জাভাস্ক্রিপ্ট কোড লিখতে পারেন। কিন্তু আমি জানি না কিভাবে তা করবেন।
যোগ লেখক Bst_coder, উৎস

আপনি আরও ভাল কোডটি ব্যবহার করেন, এটি লাইনের সংখ্যা কমাবে। শেষ তিনটি উপাদানগুলির জন্য পৃথক 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, আপনি এই কোডটি আরও একটি বৈশিষ্ট্য সহ সম্পাদনা করতে পারেন?
যোগ লেখক Bst_coder, উৎস
আমি প্রতিটি div জন্য পৃথক ক্লাস যোগ করতে যাচ্ছি এবং আমি শেষ সারিতে স্থাপন divs থেকে যে অপসারণ করতে হবে। এটি তিন divs, দুই divs বা এক 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
যোগ লেখক Thanveer Shah, উৎস