Printable View
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>
shouldn't that go in the head tags?
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.
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";
could also try using a div atag instead of the <p> tag.
colors should be quoted.Quote:
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>
var myEl = document.getElementById("myP");
myEl.style.color = 'blue';
:rolleyes:
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;
}
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?
Okay, I've whitled down the function to just this:
Still isn't working. Ideas?Code:function slideSub(which) {
var which = Number(which);
var currSubMenu = document.getElementById("SubMenu" + which);
currSubMenu.style.left = 120;
}
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
It works perfectly for me...Quote:
Originally posted by CiberTHuG
Okay, I've whitled down the function to just this:
Still isn't working. Ideas?Code:function slideSub(which) {
var which = Number(which);
var currSubMenu = document.getElementById("SubMenu" + which);
currSubMenu.style.left = 120;
}
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.Quote:
<div class="MainEntry" style="top: 1; left: 1; width: 98; height: 20;"
onClick="Javascript:slideSub(0);">
It would be better if u don't use that and instead you can just do it like
Quote:
<div class="MainEntry" style="top: 1; left: 1; width: 98; height: 20;"
onClick="slideSub(0);">
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;
}
this will expain a few things.
ECMA-262 says:
So it acts like parseInt() or parseFloat(). Furthermore, if the object is a Date object, Number() acts like .getTime(), returning the milliseconds since 1970.Quote:
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.
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.
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.