Question

有人可以帮我在javascript中编写这行jQuery。它将一个样式规则应用于一个类。

$('.dataCard').css('visibilty', 'visible !important');

Answer 1

由于!important在使用javascript设置样式时不适用，所以它会是这样的

 var elems = document.querySelectorAll('.dataCard');

 for (var i=elems.length; i--;) {
      elems[i].style.visibility = 'visible';
 }

Answer 2

如果你想创建一个可以取代你在jQuery中的功能的通用功能，你可以这样做：

function setStyle(elemOrSelector, prop, val) {
    var items;
    if (typeof elemOrSelector === "string") {
        // run selector query
        items = document.querySelectorAll(elemOrSelector);
    } else if (elemOrSelector.nodeName) {
        // must be single DOM object
        items = [elemOrSelector];
    } else if (elemOrSelector.length)
        // must be an array or nodeList
        items = elemOrSelector;
    } else {
        // don't know what it is
        return;
    }
    for (var i = 0; i < items.length; i++) {
        items[i].style[prop] = val;
    }
}

setStyle('.dataCard', "visibility", "visible");

这个通用函数允许您传递DOM元素，DOM元素列表或选择器字符串等数组。

如果您不想要一般目的，那么您可以使用它：

function setStyle(selector, prop, val) {
    var items = document.querySelectorAll(selector);
    for (var i = 0; i < items.length; i++) {
        items[i].style[prop] = val;
    }
}

setStyle('.dataCard', "visibility", "visible");

在vanilla javascript中编写这行jQuery

2 个答案: