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

Groups > comp.lang.javascript > #11855 > unrolled thread

:before Part Two

Back to article view | Back to comp.lang.javascript

Contents

  :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

#11855 — :before Part Two

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?

Andrew Poulos

[toc] | [next] | [standalone]

#11856

"Andrew Poulos" <ap_prog@hotmail.com> schreef in bericht 
news:roadnca7veRn3qPSnZ2dnUVZ_oCdnZ2d@westnet.com.au...
> 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.
In Chrome and FF the rule has a property cssText, which you can modify.
In IE, that is not possible. There you can remove the rule, on the basis of 
its index, and add a new one. In IE there is a property cssText on the 
styleSheet itself (with the cssText of all the rules combined). You can scan 
thru it to find '#test:before' and then locate 'top' thereafter. But this 
will be much more complex.
Tom


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();
      if (selector.indexOf('div.chart')>=0){return(true);}
    }
  }
  return(false);
};

[toc] | [prev] | [next] | [standalone]

#11868

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

[toc] | [prev] | [next] | [standalone]

#11873

On 17/02/12 10:11 PM, Andrew Poulos wrote:
> 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?

Since the pseudo-element doesn't exist in the document, it can't be 
edited using DOM methods. Modifying the style sheet is likely the only way.

I think you need to be very careful with this type of functionality. It 
seems to be a generic way of adding bullets or numbering, but can also 
be used to make the visible content very different to the markup.

I'm sure those who like to prevent copying of text (and perhaps other) 
content will love it.


-- 
Rob

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web