/    Sign up×
Community /Pin to ProfileBookmark

created element not inherting css class formatting

Copy linkTweet thisAlerts:
May 30.2010

I’m using something along the lines of…

[CODE]
//next we need to create a row
workingTR = workingTable.insertRow(position+i);

// then I use setAttribute to set the class

// here we would set specific instructions for creating an employee row
workingTR.setAttribute(‘class’, ’employee-detail’); // set class

[/CODE]

the row (tr) is being assigned the class of employee-detail, and I’ve confirmed this by looking throught the dom explorer. however, it’s NOT inherting the CSS formating that is located in a external file .css. I hard coded in a row with the same class ’employee-detail’ and it inherited the css formatting.

I’m wondering why my javascript created row is not inheriting the css class formatting.

Any ideas? Much thanks.

[CODE]
.employee-detail {
font-size:10px;
font-weight:bold;
}
[/CODE]

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@objNoobauthorMay 30.2010 — workingTR.className = 'employee-detail' did the trick
Copy linkTweet thisAlerts:
@SparoHawkMay 31.2010 — Yeah, like I told someone before, you do not need to use setAttribute or getAttribute with DOM properties. Use them only when you have custom HTML attributes.
Copy linkTweet thisAlerts:
@KorMay 31.2010 — Yeah, like I told someone before, you do not need to use setAttribute or getAttribute with DOM properties. Use them only when you have custom HTML attributes.[/QUOTE]
Not really. The native HTML attributes are (or should be, according to W3C Recs) DOM attribute objects as well. The problem is not the DOM method, but the inconsistency of the browsers, mainly IE. in IE, [I]class[/I] is a reserved word, thus IE uses another syntax:
<i>
</i>element.setAttribute('[COLOR="Blue"]className[/COLOR]','someclass');

which, obviously, won't work in other browsers. To avoid an if/else detector, coders prefer to use the elder but simpler DOM 0 crossbrowser syntax:
<i>
</i>element.className='someclass';

[I]This [/I]is the reason, not other.
×

Success!

Help @objNoob spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...