Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #11868

Re: :before Part Two

Followups directed to: comp.lang.javascript

Show all headers | View raw

Tom de Neef wrote:

> "Andrew Poulos" <ap_prog@hotmail.com> schreef:
>> If I have a CSS declaration that looks like this
>>
>> #test:before {
>>   content:' ';
>>   position:absolute; width:0; height:0; left:30px; top:74px;
>>   border:2px dashed #000000;
>> }
>>
>> Is it possible to change the the value for 'top' using javascript or do I
>> need modify the style sheet?
> 
> Function below was developed to test if a style rule (in casu for
> 'div.chart') was defined in one of the stylesheets.
> When you change the last if statement into
>   if (selector.indexOf('#test:before')>=0)
> you know that you have the right rule.

That is an oversimplification, as can be seen in the following example code:

  #test:before:hover {
    border: 2px dashed red;
  }

See also <http://www.w3.org/TR/css3-selectors/>.

> […]
> var checkChartStyleDefined = function(){
>   var j,k,selector,rule,rules,styleSheet,styleSheets =
>   document.styleSheets; if (!styleSheets){return(false);}
>   for (j=styleSheets.length-1;j>=0;j--){
>     styleSheet = styleSheets[j];
>     if (styleSheet.rules){rules = styleSheet.rules;}
>     else {
>       if (styleSheet.cssRules) {rules = styleSheet.cssRules;}
>       else {return(false);}
>     }
>     for (k=rules.length-1;k>=0;k--){
>       rule = rules[k];
>       if (rule.selectorText) {selector = rule.selectorText;}
>       else {
>         if (rule.cssText) {selector = rule.cssText;}
>         else {return(false);}
>       }
>       selector = selector.toLowerCase();

Caution: Selectors are _not_ case-insensitive in general.

>       if (selector.indexOf('div.chart')>=0){return(true);}
>     }
>   }
>   return(false);
> };

I find your code hardly readable, unnecessarily complicated and inefficient 
without a tangible benefit of the used notation.

Consider this instead:

  function checkChartStyleDefined ()
  {
    var styleSheets = document.styleSheets,
        rxSelector = /div\.chart/i;

    if (!styleSheets)
    {
      return false;
    }

    for (var j = styleSheets.length; j--;)
    {
      var styleSheet = styleSheets[j];
      var rules = styleSheet.rules || styleSheet.cssRules;
   
      if (!rules)
      {
        return false;
      }

      for (var k = rules.length; k--;)
      {
        var rule = rules[k];
        var selectorText = rule.selectorText || rule.cssText;
        if (!selectorText)
        {
          return false;
        }

        if (rxSelector.test(selector))
        {
          return true;
        }
      }
    }

    return false;
  }

Since several weeks, JSX:css.js contains jsx.dom.css.findRules() [1] which 
enables the OP to do exactly what they ask for, instead of – like in your 
function – only find out whether there is such a specific rule.  It requires 
support for Array.prototype.filter() or an emulation thereof.  JSX:css.js 
also contains since quite a while an insufficiently tested approach that 
puts all selectors into an array-like object (jsx.dom.css.SelectorList) [1].

[1] <http://PointedEars.de/scripts/dom/css.js>
    <http://PointedEars.de/websvn/filedetails.php?repname=JSX&path=/trunk/dom/css.js>

However, my current research has showed that there is broad support for 
Array.prototype.filter() in Web browsers, namely there is full support 
(according to my test cases, the full methods and results of which are going 
to be published at a later time), in the following versions of the named 
(and tested) ECMAScript implementations:

- Microsoft JScript 9.0.16440 (3/3)
- Mozilla JavaScript 1.6 (3/3)
- Mozilla JavaScript 1.7 (3/3)
- Mozilla JavaScript 1.8 (3/3)
- Mozilla JavaScript 1.8.1 (3/3)
- Mozilla JavaScript 1.8.5 (3/3)
- Google V8 3.6.6.19 (3/3)
- Google V8 3.7.12.12 (3/3)
- Apple JavaScriptCore 531.22.7 (3/3)
- Apple JavaScriptCore 7533.18.5 (3/3)
- Apple JavaScriptCore 7534.52.7 (3/3)
- KDE JavaScript 4.6.5 (3/3)
- Opera ECMAScript 9.52 (3/3)
- Opera ECMAScript 9.62 (3/3)
- Opera ECMAScript 9.64 (3/3)
- Opera ECMAScript 10.53 (3/3)
- Opera ECMAScript 10.54 (3/3)
- Opera ECMAScript 11.61 (3/3)

There is only partial support in

- Microsoft JScript 5.5.6330  (1/3)
- Microsoft JScript 5.6.6626  (1/3)
- Microsoft JScript 5.7.22589 (1/3)
- Microsoft JScript 5.8.23141 (1/3)
- Mozilla JavaScript 1.5      (1/3)
- Opera ECMAScript 8.0        (1/3)
- Opera ECMAScript 9.27       (1/3)

There is no support in

- Opera ECMAScript 7.02 (0/3).

The test cases for that feature were:

Test 1:

  jsx.object.isNativeMethod(jsx.global, "Array", "prototype", "filter")

Test 2:

  function f (e, i, a) { return e == "bar"; }
  new Array("foo", "bar").filter(f)[0] == "bar"

Test 3:

  function f (e, i, a) { return this[i] == "bar"; }
  var o = new Object();
  o[0] = "foo";
  o[1] = "bar";
  new Array("x", "y").filter(f, o)[0] == "y"


HTH

PointedEars
-- 
When all you know is jQuery, every problem looks $(olvable).

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

:before Part Two Andrew Poulos <ap_prog@hotmail.com> - 2012-02-17 23:11 +1100
  Re: :before Part Two "Tom de Neef" <tdeneef@qolor.nl> - 2012-02-17 14:13 +0100
    Re: :before Part Two Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-02-17 23:51 +0100
  Re: :before Part Two RobG <rgqld@iinet.net.au> - 2012-02-18 13:29 +1000

csiph-web