Change CSS Property through JavaScript. (Uses ID's and Classes)

Question

I'm trying to resize a panel using JavaScript to fit a small image into a panel, and struggling badly.

It's within the bold:

<body id="visCinemaTransRefund"><br>
<div id="content"><br>
<ul class="PayPanel" id="paymentDetails"><br>

Here's the CSS that needs modifying:

visCinemaTransRefund .PayPanel { width: 435px; }

How would I be able to modify with width of this panel?

I've also got a form I'm trying to resize within CSS:

visCinemaTransRefund FORM (width: 1005px;)

You can modify the style of the element. Look at this http://stackoverflow.com/a/10118190/2165528 — rukimira, Jul 04 '14 at 09:51

insilenzio · Answer 1 · 2014-07-04T09:58:58.290

1

Have you tried using:

document.getElementById("paymentDetails").getElementsByClassName("PayPanel")[0].style.width="1000px"

Remember: getElementsByClassName return an array of elements, so using [0] you are indexing first element (and, of course, the only one).

Since getElementsById return a single elements, getElementsByClassName could be useless.

edited Jul 04 '14 at 09:58

answered Jul 04 '14 at 09:52

insilenzio

918
1
9
23

score 1 · Accepted Answer · answered Jul 04 '14 at 09:53

1

document.getElementById('paymentDetails').style.width = '1000px';

answered Jul 04 '14 at 09:53

Alien

3,658
1
16
33

This works perfectly, thank you very much. For the form I used: `document.getElementById('form').style.width = '1005px';` – Michael Morgan Jul 04 '14 at 09:56
@MichaelMorgan Is the form ID or HTML tag? – Vinod Dalvi Jul 04 '14 at 10:03

Vinod Dalvi · Answer 3 · 2014-07-04T11:17:05.407

0

Use the following code to change the width of tags by accessing HTML element from the DOM using getElement functions and setting width to it using setAttribute javaScript function.

document.getElementById("paymentDetails").setAttribute("style","width:500px;");
document.getElementById("visCinemaTransRefund").getElementsByTagName("form")[0].setAttribute("style","width:1000px;");

edited Jul 04 '14 at 11:17

answered Jul 04 '14 at 09:57

Vinod Dalvi

389
1
4
33

It would be better if you explained the piece of code as well. – Coding Mash Jul 04 '14 at 10:33
@CodingMash Explanation added :) – Vinod Dalvi Jul 04 '14 at 11:17

score 0 · Answer 4 · answered Jul 04 '14 at 10:06

If you want to do this using CSS class :

HTML:

<div id="myDiv" class="medium"></div>
<button id="btn">Click me</button>

CSS:

#myDiv {
    background-color: gray;
}

.medium {
       height: 50px;
       width: 50px;
}

.big {
       height: 100px;
       width: 100px;
}

JS:

document.getElementById("btn").onclick = function() {
    var element = document.getElementById("myDiv"); // or document.getElementsByClassName("className")

    if (element.className == "medium") {
        document.getElementById("myDiv").className = "big";
    } else {
        document.getElementById("myDiv").className = "medium";
    }
};

JSFIDDLE

score 0 · Answer 5 · answered Jul 04 '14 at 12:00

0

Using JavaScript:

document.getElementById('paymentDetails').style.width = '1000px';

Using JQuery:

$("paymentDetails").width(1000);

$("paymentDetails").css("width","1000px");

answered Jul 04 '14 at 12:00

Venkatesh K

66
7

Change CSS Property through JavaScript. (Uses ID's and Classes)

5 Answers5