Hi, I'm not exactly new to javascript, I just haven't used it in a few years. (BTW, I'm Forum Leader for C++/C. Don't want to scare off newbies here making them think that we at TSDN doen't know what we are talking about. :D)
I understand the DOM to the point that I thought I did, but I've come across a slight problem. A DOM object that is used to reference a class doesn't have its members populated when the class style has set them. When setting the class style directly on the html tag, is does work. I.e. style="width:40" will populate the DOM object's width member to 40.
Anyone know why or how to get around this? I need to know the location and dimentions of a DOM object and it would be a pain (as well as poor style) to put all of the locations into the tag's style element on an individual basis.
Here is the code that I am working with that shows this: - .move {
-
position:relative;
-
top:0px;
-
left:0px;
-
height:100px;
-
width:100px;
-
background-color:#777777;
-
color:white;
-
}
-
.move2 {
-
top:50;
-
}
-
-
</style>
-
<script language="JavaScript" type="text/javascript">
-
- var aDOM = 0;
-
var nsDOM = 0
-
var stdDOM = document.getElementById;
-
-
var style = 1;
-
var value = 0;
-
-
if (stdDOM) {
-
aDOM = 1;
-
}
-
else {
-
var nsDOM = ( (navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) == 4));
-
if (nsDOM) {
-
aDOM = 1;
-
}
-
}
-
-
function xDOM(objectId, wS) {
-
if (stdDOM) {
-
if (wS) {
-
return document.getElementById(objectId).style;
-
}
-
else {
-
return document.getElementById(objectId);
-
}
-
}
-
else if (nsDOM) {
-
return document.layers[objectId];
-
}
-
alert("Unrecognised DOM");
-
}
-
-
function myParseInt(value)
-
{
-
return !value?0:parseInt(value);
-
}
-
-
/////////////////////////////////////////////////////
-
function obj(id)
-
{
-
this.value=xDOM(id, value);
-
this.style=xDOM(id, style);
-
-
if (!this.value || !this.style) {
-
alert("value = " + this.value + " and style = " + this.style);
-
}
-
-
this.moveRel = function(x, y)
-
{
-
this.style.left=this.getLeft()+x;
-
this.style.top=this.getTop()+y;
-
}
-
-
this.moveAbs = function(x, y)
-
{
-
this.style.left=x;
-
this.style.top=y;
-
}
-
-
this.resizeRel = function(x, y)
-
{
-
this.style.width=this.getWidth()+x;
-
this.style.height=this.getHeight()+y;
-
}
-
-
this.resizeAbs = function(x, y)
-
{
-
this.style.width=x;
-
this.style.height=y;
-
}
-
-
this.getTop = function()
-
{
-
return myParseInt(this.style.top);
-
}
-
-
this.getLeft = function()
-
{
-
return myParseInt(this.style.left);
-
}
-
-
this.getWidth = function()
-
{
-
return myParseInt(this.style.width);
-
}
-
-
this.getHeight = function()
-
{
-
return myParseInt(this.style.height);
-
}
-
-
this.setOnClick = function(fun)
-
{
-
this.value.onclick = fun;
-
}
-
}
-
-
-
function initPage()
-
{
-
var a = new obj('testObj2');
-
alert("(" + a.getLeft() + ", " + a.getTop() + ")-(" + a.getWidth() + ", " + a.getHeight() + ")");
-
a.moveRel(10,10);
-
alert("(" + a.getLeft() + ", " + a.getTop() + ")-(" + a.getWidth() + ", " + a.getHeight() + ")");
-
a.moveRel(10,10);
-
alert("(" + a.getLeft() + ", " + a.getTop() + ")-(" + a.getWidth() + ", " + a.getHeight() + ")");
-
alert("Page loaded");
-
}
-
</script>
-
</head>
-
<body onload="initPage()">
-
<div class="move" id="testObj">hello</div>
-
<div class="move move2" id="testObj2" >bye</div>
-
</body>
-
</html>
Thanks for your help.
Adrian
2  1506 
OT- in CSS you must set units for everything but zero. So 50 must be 50px or whatever.
You can get the cascaded style properties of any element in IE and the firefox/gecko browsers, each with their own interface, but Opera and some others do not make it so easy.
If you call deepCss(element,property) the cascaded element.style.property will be returned, at least in IE and firefox.
Note that it uses a string method called 'dasher', defined below. - deepCss=function(who, cssprop){
-
var val= '', str= '';
-
str= cssprop.dasher();
-
val= who.style[str];
-
if(!val){
-
if(who.currentStyle) val= who.currentStyle[str];
-
else{
-
var dv= document.defaultView;
-
if(dv && dv.getComputedStyle){
-
str= str.dasher(true);
-
val= dv.getComputedStyle(who,'').getPropertyValue(str);
-
}
-
}
-
}
-
return val;
-
}
/*
dasher takes a css property, like 'font-size' or 'border-top-color',
and javascripts it to 'fontSize' or 'borderTopColor',
or, if true is passed as its argument, the reverse.
*/ -
String.prototype.dasher= function (boo){
-
var x = this;
-
if (/^[A-Z]+$/.test(x) || /\-/.test(x)) x = x.toLowerCase();
-
if (boo=== true ){
-
if(/[a-z][A-Z]/.test(x)){
-
x= x.replace(/[A-Z]/g, function (w){
-
return "-" + w.toLowerCase();
-
});
-
}
-
}
-
else if(/\-/.test(x)){
-
x= x.replace(/\-[a-z]/g, function (w){
-
return w.charAt(1).toUpperCase() + w.substring(2);
-
});
-
}
-
return x;
-
}
-
Sign in to post your reply or Sign up for a free account.
Similar topics
by: gry |
last post by:
I often find myself wanting an instance attribute that can take on only
a few fixed symbolic values. (This is less functionality than an enum,
since there are no *numbers* associated with the...
|
by: Not Available |
last post by:
On the host server:
namespace JCart.Common
public class JCartConfiguration : IConfigurationSectionHandler
private static String dbConnectionString;
public static String ConnectionString
{
get...
|
by: Chris |
last post by:
Hi,
I don't get the difference between a struct and a class !
ok, I know that a struct is a value type, the other a reference type, I
understand the technical differences between both, but...
|
by: Rick Palmer |
last post by:
The code below is a class I am creating in order to help facilitate a
generic "data layer" assembly. Anyway, as you see the RecordCriteria class
contains three hashtables, and a structure called...
|
by: Joel |
last post by:
Is it true that if we don't specify a default constructor for
our class, then the C# compiler provides us with its own
that zeroes (or assigns default values) to the data members?
I wrote a...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
