Copying the style object from one object to another

Sparhawk

I got two div tags. One is hardcoded, one is created on the page using
javascript.
I want the dynamically created DIV to have the same style settings
(except for two which I will change afterwards) as the static one.

I tried

staticDiv = document.GetElementById("staticdiv");
dynDiv = document.GetElementById("dyndiv");
dynDiv.style = staticDiv.style

This does not work, because the style object has a getter but not a
setter (i.e. is readonly). This is at least the case for FireFox.

I can copy the style members one by one:

dynDiv.style.width = staticDiv.style.width

and would do so if there were only four or so.

Is there any easy JavaScript way to copy all members of style?
Something like
foreach(style in dynDiv.style)....?

Thanks,
Kay

Jul 23 '05 #1

Subscribe Post Reply

3981

Michael Winter

On 28 Aug 2004 12:28:51 -0700, Sparhawk <Ka************@gmx.de> wrote:

I got two div tags. One is hardcoded, one is created on the page using
javascript.
I want the dynamically created DIV to have the same style settings
(except for two which I will change afterwards) as the static one.
[snip]
Is there any easy JavaScript way to copy all members of style?
Something like
foreach(style in dynDiv.style)....?

Use a class selector and a assign the new DIV that class name.

var dyndiv;
if(document.getElementById) {
dyndiv = document.getElementById('dyndiv');
if(dyndiv) {dyndiv.className = 'yourClass';}
}

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #2

Harag

On 28 Aug 2004 12:28:51 -0700, Ka************@gmx.de (Sparhawk) wrote:

I got two div tags. One is hardcoded, one is created on the page using
javascript.
I want the dynamically created DIV to have the same style settings
(except for two which I will change afterwards) as the static one.

I tried

staticDiv = document.GetElementById("staticdiv");
dynDiv = document.GetElementById("dyndiv");
dynDiv.style = staticDiv.style

This does not work, because the style object has a getter but not a
setter (i.e. is readonly). This is at least the case for FireFox.

I can copy the style members one by one:

dynDiv.style.width = staticDiv.style.width

and would do so if there were only four or so.

Is there any easy JavaScript way to copy all members of style?
Something like
foreach(style in dynDiv.style)....?

Thanks,
Kay

how about using a CSS class name in the original DIV then when you
create the 2nd one set its classname to the same.

dynDiv.style.classname = staticDiv.style.classname

(untested)

hth.

al.

Jul 23 '05 #3

Michael Winter

On Sun, 29 Aug 2004 09:58:44 +0100, Harag
<ha**********************@softhome.net> wrote:

[snip]

dynDiv.style.classname = staticDiv.style.classname

The className property (note the capital N), is a direct property of the
element, not the style object.

Just so you know. :)

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #4

Harag

On 28 Aug 2004 12:28:51 -0700, Ka************@gmx.de (Sparhawk) wrote:

I got two div tags. One is hardcoded, one is created on the page using
javascript.
I want the dynamically created DIV to have the same style settings
(except for two which I will change afterwards) as the static one.

I tried

staticDiv = document.GetElementById("staticdiv");
dynDiv = document.GetElementById("dyndiv");
dynDiv.style = staticDiv.style

This does not work, because the style object has a getter but not a
setter (i.e. is readonly). This is at least the case for FireFox.

I can copy the style members one by one:

dynDiv.style.width = staticDiv.style.width

and would do so if there were only four or so.

Is there any easy JavaScript way to copy all members of style?
Something like
foreach(style in dynDiv.style)....?

Thanks,
Kay

eg:

<!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function changeClass() {
var i1=document.getElementById("id1");
var i2=document.getElementById("id2");
i1.className = i2.className;

}

</script>

<style type="text/css">
..tst1{background: #CC0; height:150px; width:150px; padding: 5px 5px
5px 5px;}
..tst2{background: #0CD; height:100px; width:100px; padding: 5px 5px
5px 5px;}
</style>
</head>
<body>

<p id="id1" class="tst1">this is a test</p>
<p id="id2" class="tst2">this is a test</p>

<input type="button" value="click me" onclick="changeClass();">

</body>
</html>

Jul 23 '05 #5

Harag

On Sun, 29 Aug 2004 09:15:10 GMT, "Michael Winter"
<M.******@blueyonder.co.invalid> wrote:

On Sun, 29 Aug 2004 09:58:44 +0100, Harag
<ha**********************@softhome.net> wrote:

[snip]
dynDiv.style.classname = staticDiv.style.classname

The className property (note the capital N), is a direct property of the
element, not the style object.

Just so you know. :)

Mike

LOL, Thanks, I wasn't sure I was 100% right but I was thinking along
the right lines, so I went and tested it... hence the 2nd post. This
sort of things happen when a learner helps another learner :)

Al.

Jul 23 '05 #6

Similar topics

Copying objects style questions

by: Bob Halley | last post by:

In dnspython I have a set class, SimpleSet. (I don't use Python 2.3's sets.Set class so I can keep supporting Python 2.2, and because the objects in my sets are mutable). The SimpleSet class has...

Python

Copying Local Profile to network drive in .NET

by: Robert Tarantino | last post by:

Hello, I am trying to find a way to create a scheduled task or service that will copy my local profile folders under "Documents and settings" to a network drive. This would allow me to restore...

.NET Framework

Trouble copying a picture object from one table to another

by: Lyn | last post by:

I am trying to copy selected fields from one table to another, by reading the source table record into a recordset (ADO) and then copying the relevant fields to an SQL statement "INSERT INTO...". ...

Microsoft Access / VBA

Copying Object

by: solex | last post by:

Hello, I am trying to use serialization to copy objects. The object in question "Institution" inherits from a parent object "Party" both are marked as <Serializable()>. Initially I can copy an...

Visual Basic .NET

Can I use more than one style in a treeview control at the root no

by: p3t3r | last post by:

I have a treeview sourced from a SiteMap. I want to use 2 different CSS styles for the root level nodes. The topmost root node should not have a top border, all the other root nodes should have a...

ASP.NET

vector.clear() and vector copying

by: Jess | last post by:

Hello, I tried to clear a vector "v" using "v.clear()". If "v" contains those objects that are non-built-in (e.g. string), then "clear()" can indeed remove all contents. However, if "v"...

C / C++

Copying files with progress bar

by: kimiraikkonen | last post by:

Hi, I use system.io.file class to copy files but i have a difficulty about implementing a basic / XP-like progress bar indicator during copying process. My code is this with no progress bar,...

Visual Basic .NET

Copying styles from one control to another

by: Josh Valino | last post by:

Hi, I'd like to take the style properties from one control and apply them all to the properties of another control, where they relate. The situation is this: I have a TreeView control, and...

ASP.NET

Screen Capture (Screen Copying) example / the perils of Image/ Bitmapcopying to file

by: raylopez99 | last post by:

Beware newbies: I spent a day before I figured this out: copying a bitmap (image) file to file is not quite like copying a text file--you have to do some tricks (see below), like using a...

C# / C Sharp

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Migrating Website to Cloud - Emmanuel Katto

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

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

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...

C / C++

What is ONU?

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,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

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,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing