javascript - 如何用javascript调整这个css对象？

Question

我感觉这很简单，但是我的JS不是很好。

我有一个 div 类

<div class=" foo1 foo2" style="top: 0px;">

我可以在 chrome 中看到这个 div 的属性设置如下：

.foo2
{
    position: fixed;
    width: 100%;
}

我正在尝试使用JS来调整foo2的属性，但我不知道如何去做。

var changeFoo = document.getElementById ('foo2');
changeFoo.position = "relative";

如何调用 foo2.position 并更改它？

Answer 1

尝试这个：

它是一个纯 JavaScript 解决方案。

function update_this_css(matchClass) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
                > -1) {
            elems[i].style.position = "relative";
        }
    }
}

update_this_css('foo2');

Answer 2

你可以这样做：

var foo= document.getElementsByClassName('foo2');   
for(var i=0;i<foo.length;i++){  
foo[i].style.position='relative';  
}

Answer 3

您正试图让 JS 使用您尚未设置的 ID ('foo2') 来识别元素。如果要使用类名，则必须使用：

document.getElementsByClassName

否则，您必须为您的元素提供所需的 ID。

另一个问题是您只需：

changeFoo.position

您需要在哪里使用：

changeFoo.style.position

为了让你的代码工作，你需要遍历结果：

var divs = document.getElementsByClassName('foo');
for(var i=0; i<divs.length; i++) { 
divs[i].style.position='fixed'
}

Answer 4

到目前为止，我发现的最简单的方法是使用 jQuery，因为常规的 javascript 更长且更难编写。在 jquery.com 上获取一个 JS 库 学习一次 jQuery 并永远感谢自己 :) 您可以使用 CSS 选择器来获取没有任何 ID 的元素。

然后像这样使用它。

$('.foo2').css('position', 'relative');

http://api.jquery.com/css/