js m li olarak mermi rengini değiştirin

Question

Aşağıdaki kodda belirtilen 20 şablona sahibim. Metin bir veri tabanı üzerinden eklenir, böylece orada bulunan ul/li stilini değiştiremezsiniz. Hepsini değiştirecek 1 işlev yazmak istiyorum.

Yalnızca bir dış js dosyasında mermi listesi rengini (gerçek metni değil) değiştirmek mümkün müdür?

<div id="container"> 
<h1 id="head1">Header</h1> 
<p id="p1"> 
    <ul> 
     <li>Test 1</li> 
     <li>Test 2</li> 
     <li>Test 3</li> 
    </ul> 
</p> 

Herhangi bir yardım

mutluluk duyacağız.

Answer 1

Kısa cevap hayır, salt JavaScript tarzında değil, böyle listeleri yönetebilirsiniz. HTML'ye bir class eklemeniz ve bunu JS ile değiştirmeniz veya • ile CSS ile stilinde span etiketine sahip olmanız gerekir. Bir kesmek biraz var, ama liste öğeleri margin ayarladığınızdan emin olun, bu biraz atmak olacak, aynı zamanda mermi biraz daha küçük yani eh.

var addRule = function(selector, styles, sheet) { 
    styles = (function(styles) { 
     if(typeof styles === 'string') { 
      return(styles); 
     } 
     var clone = ''; 
     for(var p in styles) { 
      if(styles.hasOwnProperty(p)) { 
       var val = styles[p]; 
       p = p.replace(/([A-Z])/g, "-$1").toLowerCase(); // convert to dash-case 
       clone += p + ":" + (p === "content" ? '"' + val + '"' : val) + "; "; 
      } 
     } 
     return(clone); 
    }(styles)); 
    sheet = sheet || document.styleSheets[document.styleSheets.length - 1]; 
    if(sheet.insertRule) { 
     sheet.insertRule(selector + ' {' + styles + '}', sheet.cssRules.length); 
    } else if(sheet.addRule) { 
     sheet.addRule(selector, styles); 
    } 
}; 
var uls = document.querySelectorAll('ul'), ul = null; 
for(var i = 0, len = uls.length; i < len; i++) { 
    ul = uls[i]; 
    ul.style.listStyle = 'none'; 
} 
addRule('li:before', { 
    'content': '• ', 
    'color': 'red' 
}); 

, önce list-style özelliğinin tüm ul elemanlarını şerit ve bir mermi noktasını taklit etmek li:before sahte seçimini kullanın ben over here bulundu addRule fonksiyonunu kullanarak: Buradaki çağrı, ancak üzerinde bir take bu.

Using the li:before selector

Answer 2

Bunu yapmak için css'yi kullanabilirsiniz. Aşağıdaki kodla bir sınıf oluşturabilir ve ardından bu sınıfı ihtiyacınız olan madde işaret noktalarına uygulamak için javascript kullanabilirsiniz.

Bu örnek sizinki gibi bir soruda Evan Mulwaski tarafından önerilmiştir. Listenin css de how to set ul/li bullet point color?

Answer 3

listesini düzenle tarzı niteliği list-style:none:

ul 
{ 
    list-style-type: square; 
} 
ul > li 
{ 
    color: green; 
} 

ul > li > span 
{ 
    color: black; 
} 

Bu

asıl soruya bağlantıdır. Ve cutom öğesini li içine ekleyin.

<li> 
    <span style = "color :red"> 
     &#9673; item 1 
    </span> 
</li>