Question

我有一个CSS选择器#menu。

我想在JavaScript中访问其属性。由于li单独具有不同的属性，因此我需要同时访问#menu和getElementById(menu li), QuerySelector and getComputedStyle这一点非常重要。似乎$qry = mssql_query('select userid,messageid,statusid from tableA order by statusid'); while (($row=mssql_fetch_array($qry) !== FALSE) { if (isset($previous) && $previous['statusid'] !== $row['statusid']) { // do what you gotta do here } $previous = $row; }在这种情况下不起作用。

有没有其他方法可以实现这一点，或者我在这里遗漏了什么？

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]索引，并使用for或者多个li项目

Answer 3

如果你想获得css规则的属性，你可以这样做：

＆＃13;

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'));

＆＃13;

#menu li {background-color: red;}

＆＃13;

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

＆＃13;

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/

在JavaScript中获取元素id和泛型元素

4 个答案: