Получить идентификатор элемента и общий элемент в JavaScript

Question

У меня есть селектор CSS #menu li {background-color: red;}.

Я хочу получить доступ к его атрибутам в JavaScript. Важно, что мне нужно получить доступ как к #menu, так и к li, так как только #menu имеет разные атрибуты. Кажется, что getElementById(menu li), QuerySelector and getComputedStyle не работают в этом случае.

Есть ли другой способ достичь этого или я что-то упустил?

Answer 1

Вы должны использовать JQuery для этого, здесь простой пример кода

//html 
      <div id="menu" data-number="123" > 
      </div> 
    //jquery 
      var menu = $('#menu').attr('data-number'); 
      console.log(menu); 
      //print 123 

Answer 2

JQuery версия

https://jsfiddle.net/pn52uvw1/

$(".button_1").click(function(){ 
    alert($("#menu").attr("data-item-id")); 
}) 
$(".button_2").click(function(){ 
    alert($("#menu li").attr("data-item-id")); 
}) 

не JQuery версия

https://jsfiddle.net/pn52uvw1/2/

window.firstFunction = function(){ 
    var target = document.getElementById("menu"); 
    alert(target.getAttribute('data-item-id')); 
} 

window.secondFunction = function(){ 
    var target = document.getElementById("menu").children[0]; 
    alert(target.getAttribute('data-item-id')); 
} 

, но вам нужно будет избавиться от этого [0] индекса, вероятно, и использовать для или что-то для нескольких элементов Li

Answer 3

Если вы хотите, чтобы получить свойство из этого правила CSS, вы можете сделать так :

function getStyleFromSelector(selector, styleName) { 
 
    // Get all style elements 
 
    var styles = document.styleSheets; 
 
    var styleIndex = 0, styleCount = styles.length; 
 
    var rules, ruleCount, ruleIndex; 
 
    // Iterate though styles 
 
    for (styleIndex = 0; styleIndex < styleCount; ++styleIndex) { 
 
     
 
     // Get the css rules under the style. 
 
     rules = styles[styleIndex].rules; 
 
     ruleCount = rules.length; 
 
     for (ruleIndex = 0; ruleIndex < ruleCount; ++ruleIndex) { 
 
     
 
     // Check if the selector match the one we want 
 
     if (rules[ruleIndex].selectorText === selector) { 
 
      return styleName ? 
 
       rules[ruleIndex].style.getPropertyValue(styleName) : rules[ruleIndex]; 
 
     } 
 
     } 
 
    } 
 
} 
 

 
var div = document.getElementById("results"); 
 
var result = getStyleFromSelector('#menu li'); 
 
console.log(result); 
 
div.innerHTML = 'background-color is : ' + result.style.backgroundColor; 
 
console.log(getStyleFromSelector('#menu li', 'background-color'));

#menu li {background-color: red;}

<div id="results"></div>

Answer 4

Вы можете попробовать его без дополнительных библиотек со следующим

var len = document.querySelectorAll("#menu li").length; 
for(i = 0; i<len; i++) 
    document.querySelectorAll("#menu li")[i].style.backgroundColor="blue"; 

Я также сделал вас (не очень красиво) jsfiddle

https://jsfiddle.net/gmeewsmz/