How to style with JavaScript

Question

I am trying to use style attribute for JavaScript. But, apparently, I was doing something wrong with it. I am new in JavaScript so a general idea about style attribute for JavaScript would be great. I want to change the place, color and text-decoration etc. of JavaScript elements. I thought that declaring style attribute for div changeMe in HTML will be applied for the JavaScript. Because, JavaScript takes id of it. I wanted to use all of the style attributes that are in the div. Where am I missing? Here is my attempt to do it:

<div id="changeMe" style="position: absolute;text-decoration: none; 
                          color: white;right:43%; top: 90px;">
    <a href="home.php" >Go to homepage</a>
</div>

Javascript:

var testElement = document.getElementById("changeMe");
var text = "aaa".document.getElementById("changeMe");
text.style.textDecoration = "none"; //I changed style here too because first did not       
//work.

check.onfocus= function()
{   
    testElement.innerHTML = text.link("index.php");;
}

Please help me understand the structure.I am stuck.Thanks

I wanted to use all style attributes of div "changeME" for javascript links(text.link)But it did not work.How can i do that? — user893970
– user893970, Commented Aug 19, 2011 at 18:32
What is check? What do you think "aaa".document should be? What do you think text should be? — Josh Lee
– Josh Lee, Commented Aug 19, 2011 at 18:33
I think it would greatly benefit you to visit learn.appendto.com/lessons and watch all of their free lessons (of if you are time strapped just watch the JavaScript ones and save the jQuery ones for later). You'll get a good understanding of JavaScript from them which will either help you solve your own issue or at the very least it will help you formulate a better question to ask on this site. — bittersweetryan
– bittersweetryan, Commented Aug 19, 2011 at 18:34
@user893970 — you can't. The style attribute only lets you style the element to which it is applied. It is a very limited and ugly tool, which is why real stylesheets are preferred (the selector syntax is very powerful). — Quentin
– Quentin, Commented Aug 19, 2011 at 18:39

Joe · Accepted Answer · 2012-02-24 19:20:18Z

4

Your JavaScript will error here:

var text = "aaa".document.getElementById("changeMe");

…since "aaa" is a string and strings do not have a document property. The rest of the script won't execute.

If you fixed that line, then:

text.style.textDecoration = "none";

… would have no effect. The text-decoration is part of the link's style, not the div's.

You need to style the <a> element. If you really want to get to it via JS then you can:

testElement.getElementsByTagName('a')[0]

But you would probably be better off just using a stylesheet:

#changeMe a { text-decoration: none; }

But make sure you do something else to make it clear that the piece of non-underlined text is a link.

edited Feb 24, 2012 at 19:20

Joe

82.9k18 gold badges130 silver badges147 bronze badges

answered Aug 19, 2011 at 18:33

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guttsy · Accepted Answer · 2011-08-19 18:35:33Z

0

You're trying to style the div but you need to apply your text-decoration and color styles to the a tag itself for it to take effect.

All of this can easily be done with cascading style sheets instead, by the way.

answered Aug 19, 2011 at 18:35

Guttsy

2,1091 gold badge18 silver badges30 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2011-08-19 18:36:04Z

0

document.getElementById("changeMe").firstChild.style.textDecoration = "none";

Working Example: http://jsfiddle.net/8Evyq/

answered Aug 19, 2011 at 18:36

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Comments

Michael Berkowski · Accepted Answer · 2011-08-19 18:39:36Z

0

Something definitely fishy here.

var text = "aaa".document.getElementById("changeMe");

// Without those "aaa"
var text = document.getElementById("changeMe");

// To change the <a> style inside the 'changeMe' <div>
var alinks = text.getElementsByTagName("a");
for (var i=0; i<alinks.length; i++) {
  alinks[i].style.textDecoration = "none";
}

Here it is in action.

edited Aug 19, 2011 at 18:39

answered Aug 19, 2011 at 18:33

Michael Berkowski

271k47 gold badges451 silver badges395 bronze badges

Collectives™ on Stack Overflow

How to style with JavaScript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related