如何在javascript中编写css代码？ （未捕获的TypeError：无法设置undefined的属性“height”）

How to write css code in javascript? (Uncaught TypeError: Cannot set property "height" of undefined)

如何在javascript中编写css代码? (未捕获的TypeError:无法设置undefined的属性“height”)

javascript

document.getElementById("slideshow").getElementsByClassName("arrow").style.height = "86px";

css

#slideshow .arrow{
    height:86px;
    width:60px;
    position:absolute;
    background:url('arrows.png') no-repeat;
    top:50%;
    margin-top: -43px;
    cursor: pointer;
    z-index: 5000;
}

4 个解决方案

#1

The key here is the pluralisation of getElementsByClassName - elements. This method returns an array-like object of elements, not just one element.

这里的关键是getElementsByClassName - elements的复数。此方法返回元素的类数组对象,而不仅仅是一个元素。

To apply the style to each, you need to loop through this array-like object and add the styles to each individual element returned:

要将样式应用于每个样式,您需要循环遍历此类数组对象并将样式添加到返回的每个单独元素:

var elems = document.getElementById("slideshow").getElementsByClassName("arrow");

for (var i = 0; i < elems.length; i++)
    elems[i].style.height = "86px";

#2

document.getElementsByClassName returns an array.

document.getElementsByClassName返回一个数组。

You have to loop through it, or if you know the index, do this:

您必须遍历它,或者如果您知道索引,请执行以下操作:

document.getElementById("slideshow").getElementsByClassName("arrow")[0].style.height = "86px";

document.getElementById(“slideshow”)。getElementsByClassName(“arrow”)[0] .style.height =“86px”;

or

document.getElementById("slideshow").getElementsByClassName("arrow")[i].style.height = "86px";

document.getElementById(“slideshow”)。getElementsByClassName(“arrow”)[i] .style.height =“86px”;

i being your loop variable.

我是你的循环变量。

#3

A bit of theory:

一点理论:

Changing HTML Style

更改HTML样式

To change the style of an HTML element, use this syntax:

要更改HTML元素的样式,请使用以下语法:

document.getElementById(id).style.property=new style

Here is the example:

这是一个例子:

// JavaScript demonstration
var changeBg = function (event) {
    console.log("method called");
    var me = event.target
    ,   square = document.getElementById("square");
    square.style.backgroundColor = "#ffaa44";
    me.setAttribute("disabled", "disabled");
    setTimeout(clearDemo, 2000);
}

function clearDemo(button) {
    var square = document.getElementById("square");
    square.style.backgroundColor = "transparent";
    button.removeAttribute("disabled");
}

var button = document.querySelector("button");
button.addEventListener("click", changeBg);
console.log(button);

#square {
    width: 20em;
    height: 20em;
    border: 2px inset gray;
    margin-bottom: 1em;
}
button {
    padding: .5em 2em;
}

<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>

JavaScript-Based Style Sheets - http://www.w3.org/Submission/1996/1/WD-jsss-960822
Mozzila's Web Developer guide - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/JavaScript

基于JavaScript的样式表 - http://www.w3.org/Submission/1996/1/WD-jsss-960822 Mozzila的Web开发人员指南 - https://developer.mozilla.org/en-US/docs/Web/指南/ CSS / Getting_started / JavaScript的

While I've started with explanation and theory @James Donnelly already provided my answer, which I've wanted to use:

虽然我从解释和理论开始,@ James Donnelly已经提供了我的答案,我想用它:

var elements = document.getElementById("slideshow").getElementsByClassName("arrow");

for (var i = 0; i < elems.length; i++) {
    elems[i].style.height = "86px";
.

#4

As someone already pointed out,

有人已经指出,

document.getElementsByClassName returns an array (N Objects)
while
document.getElementById returns an element (ONE object)

document.getElementsByClassName返回一个数组(N个对象),而document.getElementById返回一个元素(ONE对象)

This is because N elements can have the same class but only ONE item can have a particular ID.

这是因为N个元素可以具有相同的类,但只有一个项可以具有特定的ID。

Since you can't edit more items' attribute at once, you must cycle them and edit the attribute of each one by one

由于您无法一次编辑更多项目的属性,因此必须循环它们并逐个编辑每个项目的属性

document.getElementById("slideshow").getElementsByClassName("arrow")[0].style.height = "86px";
document.getElementById("slideshow").getElementsByClassName("arrow")[1].style.height = "86px";
document.getElementById("slideshow").getElementsByClassName("arrow")[2].style.height = "86px";
.....
document.getElementById("slideshow").getElementsByClassName("arrow")[N].style.height = "86px";

This can be achieved by using a for cycle or a each one.

这可以通过使用for循环或每个循环来实现。