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

admin管理员组

文章数量:1406937

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

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;
}

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

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;
}

• javascript
• css

Share Improve this question Follow edited Oct 9, 2014 at 9:52 James Donnelly 129k3535 gold badges215215 silver badges223223 bronze badges asked Oct 9, 2014 at 9:47 NEWNEW 2511 silver badge55 bronze badges 3

• @Prabhu sure you can – Christoph Commented Oct 9, 2014 at 9:52
• @JamesDonnelly : didnt know thanks. – Prabhu Murthy Commented Oct 9, 2014 at 9:53
• @Prabhu otherwise there would have been an error stating that getElementsByClassName is no method of that object. – Christoph Commented Oct 9, 2014 at 9:59

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

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";

document.getElementsByClassName returns an array.

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

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

or

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

i being your loop variable.

A bit of theory:

Changing HTML Style

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

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/Submission/1996/1/WD-jsss-960822
Mozzila's Web Developer guide - https://developer.mozilla/en-US/docs/Web/Guide/CSS/Getting_started/JavaScript

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

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

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

As someone already pointed out,

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

This is because N elements can have the same class but only ONE item can have a particular 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.

本文标签：