473,701 Members | 2,718 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Changing CSS 2.1 descendant selectors

If I have an external stylesheet that is @imported into my page and it
has an element that looks like this:

* html td {
font-style: italic;
}

how can I use javascript to change the font style to 'normal'?

Andrew Poulos
Jul 23 '05 #1
5 1972


Andrew Poulos wrote:
If I have an external stylesheet that is @imported into my page and it
has an element that looks like this:

* html td {
Pretty odd selector, * html needs an element as the ancestor of <html>
which should never be the case in a HTML document. Is that a CSS hack
for a particular browser doing goofy stuff which the selector?
font-style: italic;
}

how can I use javascript to change the font style to 'normal'?


IE has its own object model to access stylesheets, see
<http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/collections/stylesheets.asp >
<http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/collections/imports.asp>

Mozilla implements (parts of) the W3C DOM Level 2 for CSS stylesheets as
documented here:
<http://www.w3.org/TR/DOM-Level-2-Style/>
<http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.htm l#StyleSheets-StyleSheet-DocumentStyle>
<http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.htm l#StyleSheets-StyleSheet>
<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet>
<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSImportRule>
So with Mozilla you can walk document.styleS heets (for the <link> and
<style> embedded sheets), in document.styleS heets[index] you can walk
the cssRules collection and need to find an import rule and then that
has a styleSheet property which again has a cssRules collection where
you need to look for the rule with the selectorText.
I am not sure whether I have ever tried to script a rule in an imported
sheet so I can't currently say without testing whether Mozilla makes
imported stylesheets available.

I know that Opera 7 (and current 8.0 beta) do not provide script access
to stylesheets. Not sure how far latest Safari or Konqueror are with
document.styleS heets etc. maybe someone else can say.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2
Martin Honnen wrote:
I am not sure whether I have ever tried to script a rule in an
imported sheet so I can't currently say without testing whether
Mozilla makes imported stylesheets available.


It does. Here's a quick hack, roughly tested with Mozilla and MSIE:

function modifyCSSRule(s Sel, sAtt, vVal) {
var oSheets,
i,
oMSIEImpSheet,
j,
rSel = new RegExp("^" + sSel + "$", "i");
if ((oSheets = document.styleS heets))
for (i=0; i<oSheets.lengt h; i++) {
modifySheet(oSh eets[i], rSel, sAtt, vVal);
if ((oMSIEImpSheet = oSheets[i].imports))
for (j=0; j<oMSIEImpSheet .length; j++)
modifySheet(oMS IEImpSheet[j], rSel, sAtt, vVal);
}
}

function modifySheet(oSh eet, rSel, sAtt, vVal) {
var oRules,
j,
sText,
oMozImpSheet;
if ((oRules = oSheet.rules || oSheet.cssRules ))
for (j=0; j<oRules.length ; j++)
if ((sText = oRules[j].selectorText)) {
if (rSel.test(sTex t))
return !(oRules[j].style[sAtt] = vVal);
}
else if ((oMozImpSheet = oRules[j].styleSheet))
modifySheet(oMo zImpSheet, rSel, sAtt, vVal);
}
For the OP, assumed that the correct rule is

html td {
font-style: italic;
}

(without an ancestor of HTML), the call should read

modifyCSSRule(' html td', 'fontStyle', 'normal')

ciao, dhgm
Jul 23 '05 #3
Martin Honnen wrote:
Andrew Poulos wrote:
[snip]
* html td {


Pretty odd selector


It's an IE hack. For some reason, IE doesn't believe that HTML is the
root element for HTML documents.
I know that Opera 7 (and current 8.0 beta) do not provide script
access to stylesheets.


I know that the styleSheets collection isn't available, but can you
get direct access via a reference to a LINK or STYLE element? I
haven't got around to reinstalling Opera yet after my hard disk
trashed itself.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4
Dietmar Meier wrote:
Here's a quick hack [...]


Did some corrections:

function modifyCSSRule(s Sel, sAtt, vVal) {
var oSheets, i, j, rSel = new RegExp("^" + sSel + "$", "i");
if ((oSheets = document.styleS heets))
for (i=0; i<oSheets.lengt h; i++) {
modifySheet(oSh eets[i], rSel, sAtt, vVal);
}
}

function modifySheet(oSh eet, rSel, sAtt, vVal) {
var oRules, j, sText, oMozImpSheet, oMSIEImpSheet;
if ((oRules = oSheet.rules || oSheet.cssRules ))
for (j=0; j<oRules.length ; j++)
if ((sText = oRules[j].selectorText)) {
if (rSel.test(sTex t))
(oRules[j].style[sAtt] = vVal);
}
else if ((oMozImpSheet = oRules[j].styleSheet))
modifySheet(oMo zImpSheet, rSel, sAtt, vVal);
if ((oMSIEImpSheet = oSheet.imports) )
for (j=0; j<oMSIEImpSheet .length; j++)
modifySheet(oMS IEImpSheet[j], rSel, sAtt, vVal);
}

ciao, dhgm
Jul 23 '05 #5


Michael Winter wrote:
Martin Honnen wrote:

I know that Opera 7 (and current 8.0 beta) do not provide script
access to stylesheets.

I know that the styleSheets collection isn't available, but can you
get direct access via a reference to a LINK or STYLE element?


As far as I remember for 7.xy it is not possible, those elements do not
expose a property named sheet as they would need to expose a style
sheet. I have just tested with 8.0 beta and again there is no such
property. Of course if those properties where there then
document.styleS heets should be easy.
So unless with direct access via a reference to link or style you meant
parsing their content by hand then no, with Opera access to stylesheet
information (style sheets in the document and rules in the style sheet)
is not provided.
So with Opera if you want to change some style rule all you can do is
create a new <style> element, throw in a text node with the complete new
rule as needed and insert the <style> element at the end of the head,
that way it overrides earlier rules but if you do that a lot it is
pretty inefficient.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2618
by: Tony Benham | last post by:
I have been getting to grips with css recently (very slowly), and one area I have a problem is when to use class selectors or id selectors. Are there any guidelines when to use each type ? The key difference is, AFAICS, is that id selectors can only be used once, whereas class selectors can be used repeatedly ? Is this the main differentiator ? Regards Tony B
11
2028
by: Laurence Tureaud | last post by:
hello i'm just getting started with CSS & am reading through Eric Meyer on CSS, specifically the first chapter. he creates these styles: td#advert {stuff} #content-top td { stuff } tr td#sidetop {stuff }
4
4254
by: Andy Fish | last post by:
hi, I am using descendent selectors to format cells within a table according to the css class of the table. However, when using nested tables, it seems to pick up the outer matching rule rather than the inner one. here's a self-contained example: <HTML><HEAD> <style type="text/css"> table.foo td { background-color:red; }
7
2322
by: Philip Herlihy | last post by:
If I'm reading my reference books correctly, I should be able to pick out cells in a table by combining a <col> selector with a class selector, like this: col#thisid td.thisclass {color: red; } ... but it doesn't work. I can get the unadorned <col> selector to work in IE6 and Opera (not Dreamweaver 2004): col#thiscol {color: red; } ... but when I add a descendent selector it stops working. I'd be grateful for advice or comments.
6
1892
by: Rhino | last post by:
What's the simplest way to determine which, if any, of my selectors are not needed in a given stylesheet? I have a small number of HTML pages that share two stylesheets; one stylesheet is for display purposes and one is for printing. I suspect that some of the selectors in my stylesheet are no longer needed due to deletions of parts of the HTML pages and would like to remove those selectors from my stylesheets. But I'd like to avoid a...
1
2680
by: mplus_2000 | last post by:
I have recently inherited a database. The switchboard (and other forms) displays the name of the database on it (top, center). Currently the name that appears is Reviews. There are plans to roll out the application (i.e. making copies of the database) to other locations (Reviews-NY, Review-Dallas etc). If was mentioned today in passing by the original developer that there is a way to change the title that appears on the switchboard without...
2
1022
by: Bruce HS | last post by:
VS2005, VB. I put some buttons in winform A. I then create form B which inherits A. I want to move the buttons to a different location in form B, but find all properties of the button in the descendant set to readonly. Is there a way I can adjuste these properties in the descendant? This would make the visual inheritance much more useful.
3
1453
by: Bruce HS | last post by:
When I raise an event in an ancestor, the event fires first in the ancestor, then its descendant, and then in the descendant's descendant. I would like the descendant's descendant to fire first in one particular case. How do I accomplish this?
7
2683
by: John Dann | last post by:
I'm unclear as to how best to use what I'm terming the top-level CSS selectors, by which I mean selectors like *, html and body. I'm coming at this from trying to understand how best to set font sizes but I seem to have strayed into a broader question. Some CSS guides seem to suggest that a * declaration is good practice for any style sheet, primarily I suppose to set zero defaults for margin and padding for all other relevant selectors...
5
1759
by: Nathan Sokalski | last post by:
I'm not sure if this is the right place to ask this question, but I wasn't sure where else to go. I have a table made of the following tags: <table class="myclass"> <tbody> <tr><td>.</td></tr> <tr><td>.</td></tr> <tr><td>.</td></tr> </tbody> </table>
0
8737
marktang
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8649
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9232
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9084
jinu1996
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8936
tracyyun
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7827
agi2029
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
4411
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3104
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2399
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.