JavaScript: .style

**CiberTHuG** · Jan 4th, 2002, 03:21 PM

Okay, what is the standards way of manipulating style? The following doesn't seem to work, and I don't find the documentation to support it.

Code:

<html>
  <head></head>
  <body>
    <p id="myP">Foo.</p>
    <script type="text/javascript">
      var myEl = document.getElementById("myP");
      myEl.style.color = blue;
    </script>
  </body>
</html>

scoutt · Jan 4th, 2002, 03:24 PM

shouldn't that go in the head tags?

**CiberTHuG** · Jan 4th, 2002, 03:29 PM

Shouldn't what go in the head tag?

All the same, I can't make heads or tails of how the DOM 2 Style specs tie in. I can't find documentation saying that ".style" exists.

scoutt · Jan 4th, 2002, 03:43 PM

the javascript. I know the .style exist but for the life of me can't fine the page. try adding the " " around blue, I think that is howit works. cause I know this works.

var myDiv = document.all["divName"];
// in Microsoft Internet Explorer
var myDiv = document.getElementById("divName");
// in Netscape 6

myDiv.style.fontSize = 16;
myDiv.style.backgroundColor = "red";
myDiv.style.fontWeight = "bolder";
myDiv.style.color = "blue";

scoutt · Jan 4th, 2002, 03:45 PM

could also try using a div atag instead of the <p> tag.

**thinktank2** · Jan 4th, 2002, 03:46 PM

Originally posted by CiberTHuG
Okay, what is the standards way of manipulating style? The following doesn't seem to work, and I don't find the documentation to support it.

Code:

<html> <head></head> <body> <p id="myP">Foo.</p> <script type="text/javascript"> var myEl = document.getElementById("myP"); myEl.style.color = blue; </script> </body> </html>

colors should be quoted.

var myEl = document.getElementById("myP");
myEl.style.color = 'blue';

**CiberTHuG** · Jan 4th, 2002, 03:57 PM

Okay, I should've used a real example, and not the one you guys are picking apart. As to quoting colors, I'll have to double check on that. It isn't quoted somewhere, but that may be it isn't quoted in CSSs but it is quoted in scripts.

Anyway, below is a page that does not work, and the CSS it refers to. Well, it works in IE, but that isn't saying anything. It also works in Opera, oddly enough. I can't find the error, so I wanted to make sure I was conforming to the standards. But I can't find .style in the standards.

Code:

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="sislimenu.css">
    <script type="text/javascript">
      function slideSub(which) {
        var which = Number(which);
        var currSubMenu;

        for (var i = 0; i < 2; i++) {
          currSubMenu = document.getElementById("SubMenu" + i);
          if (which == i) {
            currSubMenu.style.left = 120;
          }
          else {
            currSubMenu.style.left = 20;
          }
        }
      }
    </script>
  </head>
  <body>
    <div class="SiSliMenu" style="top: 20; left: 20; width: 100; height: 420;">
      <div class="MainEntry" style="top: 1; left: 1; width: 98; height: 20;" onClick="JavaScript:slideSub(0);">
        <span class="MainText">foo</span>
      </div>
      <div class="MainEntry" style="top: 22; left: 1; width: 98; height: 20;" onClick="JavaScript:slideSub(1);">
        <span class="MainText">bar</span>
      </div>
    </div>
    <div class="SiSliSubMenu" id="SubMenu0" style="top: 20; left: 20; width: 100; height: 43; z-index: -1;">
      <div class="SubEntry" style="top: 1; left: 1; width: 98; height: 20;"><span class="SubText">some foo</span></div>
      <div class="SubEntry" style="top: 22; left: 1; width: 98; height: 20;"><span class="SubText">more foo</span></div>
    </div>
    <div class="SiSliSubMenu" id="SubMenu1" style="top: 42; left: 20; width: 100; height: 43; z-index: -1;">
      <div class="SubEntry" style="top: 1; left: 1; width: 98; height: 20;"><span class="SubText">some bar</span></div>
      <div class="SubEntry" style="top: 22; left: 1; width: 98; height: 20;"><span class="SubText">more bar</span></div>
    </div>
  </body>
</html>

Code:

div.SiSliMenu {
  position: absolute;
  z-index: 0;
  border: 1px;
  background-color: blue;
}
div.SiSliSubMenu {
  position: absolute;
  border: 1px;
  background-color: gray;
}
div.MainEntry {
  position: absolute;
  border: 1px;
  background-color: yellow;
  text-align: center;
}
div.SubEntry {
  position: absolute;
  border: 1px;
  background-color: green;
  text-align: center;
}
span.MainText {
  text-transform: capitalize;
}
span.SubText {
  text-transform: capitalize;
}

**CiberTHuG** · Jan 4th, 2002, 04:00 PM

As a side note, the original example I posted works (with the color quoted). So the answer would be, "seems to be".

And if it is, what is wrong with my page?

**CiberTHuG** · Jan 4th, 2002, 04:25 PM

Okay, I've whitled down the function to just this:

Code:

      function slideSub(which) {
        var which = Number(which);
        var currSubMenu = document.getElementById("SubMenu" + which);
        currSubMenu.style.left = 120;
      }

Still isn't working. Ideas?

Tygur · Jan 4th, 2002, 09:16 PM

It doesn't look like ".style" is part of any standard: (bottom of the page, under "Standards Information")
http://msdn.microsoft.com/library/de.../obj_style.asp

**thinktank2** · Jan 5th, 2002, 03:45 PM

Originally posted by CiberTHuG
Okay, I've whitled down the function to just this:

Code:

function slideSub(which) { var which = Number(which); var currSubMenu = document.getElementById("SubMenu" + which); currSubMenu.style.left = 120; }

Still isn't working. Ideas?

It works perfectly for me...
Though the only problem when I copy and paste the entire html you posted in the previous post is that...

the javascript in onclick event handler is broken by a white space by this forum.

It would be better if u don't use that and instead you can just do it like

scoutt · Jan 5th, 2002, 08:48 PM

Travis,,

add a px after the 120

Code:

 function slideSub(which) {
        var which = Number(which);
        var currSubMenu = document.getElementById("SubMenu" + which);
        currSubMenu.style.left = 120px;
      }

scoutt · Jan 6th, 2002, 06:03 PM

this will expain a few things.

ECMA-262 says:

15.7.1 The Number Constructor Called as a Function.
When Number is called as a function rather than as a constructor, it performs a type conversion.

So it acts like parseInt() or parseFloat(). Furthermore, if the object is a Date object, Number() acts like .getTime(), returning the milliseconds since 1970.

In Internet Explorer:
.left property: is the object's position with respect to the left edge of the next object in the heirarchy. It is a string and includes a units designator. eg. "150mm"
.posLeft property: reflects the numeric value of the .left property. Changes to it change the .left property, leaving the units designator intact. It is a number. eg. 120
.pixelLeft property: reflects the value of the .left property in pixels. It is an integer and is always interpreted in pixels. eg. 300

When scripting the .left property, normally use .pixelLeft or .posLeft instead, or else add a units designator to the .left property.

**CiberTHuG** · Jan 7th, 2002, 11:57 AM

So I worked on this and didn't check back here. I forgot about it, but it is working. I changed so many things, but nothing about this function. *shrug*

Anyway, I still don't see style documented well enough, but I'm not going to worry about it right now.

Other comments:

I want Number() to do a type conversion. I guess I should really use parseInt() since I truely want an integer.

Why use posLeft or anything but left? Left is the part of the CSS I am trying to get to. I guess I should check the CSS DOM doco.

Thread: JavaScript: .style

Thread Tools

Display

JavaScript: .style

Re: JavaScript: .style

Posting Permissions