Bir sınıfa ait özelliği jquery ile değiştirmenin bir yolu var mı?

Question

Bu soru, yinelenen veya aptal olabilir. Buna benzer soruları okudum ama bu tam olarak değil.

Görünen, .someclass ve .someclass2 sınıfları olan iki dinamik oluşturulmuş li varsayalım ve her ikisi de sayfa yüklemesinde hesaplanması gereken farklı genişliklere sahiptir.

Yani, oluşturulan kez yerine genişliği her zaman yeni li ayar sınıflarına hesaplanan genişliğini ayarlamak için bir yol var?

Bunu css ile yapabiliriz, genişlik biliniyorsa, .someclass { width: 20px;} .someclass2 { width: 50px;} ve daha sonra yeni bir eleman oluşturulduğunda css bunlara uygulanır. Sadece bir kez bunu yapmanın bir yolu var mı -

kez genişliği uygulanıyor

$('#somediv').click(somefunction); 

function somefunction() { 
    $('#somediv').append('<li class="someclass"><li class="someclass2"></li></li>'); 

    $('.someclass').css('width', $(document).width() - 112); //every time 

    $('.someclass2').css('width', $(document).width() - 250); //every time 

} 

oluyor bir ekleme her zaman genişliğini olmadığını mı uygulanıyor?

$('.someclass').css('width', $(document).width() - 112); //once, but it will not work 

$('.someclass2').css('width', $(document).width() - 250); //once, but it will not work 

$('#somediv').click(somefunction); 

function somefunction() { 

    $('#somediv').append('<li class="someclass"><li class="someclass2"></li></li>'); 

} 

Daha fazla öğe varsa ve sık sık meydana gelirse, herhangi bir performans farkı olur mu?

Answer 1

JS kullanarak bir cssText oluşturabiliriz, böylece her css sınıfı için özel değerler ayarlayabilirsiniz.

• çalıştır gereken sınıfları oluşturmak için yukarıdaki kodu:

  Sonra içeriği Şimdi bunu yapmanız gerekenler tüm önceden tanımlanmışcssText

  var cssText = '.someClass {width:' + (window.innerWidth - 100) + 'px;} .someClass2 {width:' + (window.innerWidth - 200) + 'px; }', 
      head = document.head, 
      style = document.createElement('style'); 
  
  if (style.styleSheet){ 
      style.styleSheet.cssText = cssText; 
  } else { 
      style.appendChild(document.createTextNode(cssText)); 
  } 
  
  head.appendChild(style); 
  

  eşittir bir style öğesi oluşturun ve set

• Her seferinde stillerine gerek kalmadan kodunuzu istediğiniz zaman arayın