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

Groups > comp.lang.javascript > #18206

Re: apply css to elements just added

Followups directed to: comp.lang.javascript

Show key headers only | View raw

Samuele Millevolte wrote:

> Thomas 'PointedEars' Lahn ha scritto:
>> Samuele Millevolte wrote:
>> > is it possible with jQuery set a css style on elements that are just
>> > added to the DOM? (without use plugin)
>> 
>> Yes, but it is far more efficient to do that *without* jQuery.

<http://jibbering.com/faq/#posting>
<http://PointedEars.de/faq/#posting>

> ok. How?

  objRef.style.styleProperty = styleValue;

There are only two important things there:

1. The “float” CSS property requires branching (feature test) for standards
   compliant “cssFloat” vs. MSHTML-proprietary “styleFloat” (because “float”
   was once a reserved word in ECMAScript, and still is in other languages);

2. For property names that contain a hyphen-minus, that needs to be
   removed and the following character must be uppercase (e.g.,
   “borderTopColor” for “border-top-color”).

<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties>

As an alternative, you can feature-test (e.g. with 
jsx.object.isHostMethod()) for the availability of

  objRef.style.setProperty(styleProperty, styleValue);

which has the advantage of working with a verbatim CSS property name.

In the latter case, “styleProperty” MUST be of type String.  In both cases, 
“styleValue” SHOULD be of type String (even though it is a number).  A 
declaration priority modifier like “!important”, should it be necessary, 
must be specified with

  objRef.style.setProperty(styleProperty, styleValue, "important");

instead, then.

<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration>

The jsx.dom.create*() family of methods simplifies this for several element 
objects and properties, with e. g.

  var span = jsx.dom.createElementFromObj({
    type: "span",
    properties: {
      style: {
        "float": "left",
        textAlign: "right"
      }
    }
  });

but the version that is currently online does not use setProperty() yet (it 
computes the property name as described above instead, and caches the 
result).  So if you prefer that setProperty() be preferred if available, you 
will either have to tweak it a bit (it is free software under the GPLv3), 
wait for one of the next revisions, or write something similar yourself (no 
*unauthorized* copying, please).  As far as e.g. jQuery does not modify 
built-in objects, or misuses default event listeners, JSX is compatible with 
jQuery and other third-party code; that has been proven in a production 
environment which uses both jQuery and JSX widgets (dom/widgets.js).

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

(Reminds me that it would be better if jsx.dom.createElementFromObj() would 
use jsx.dom.setStyleProperty(), so that you could write “{"text-align": 
"right}” and it would be DRY.)

It is possible that jQuery itself can do approximately the same (RTFM), but 
not as efficient because of its selector-engine approach:

<http://www.fortybelow.ca/hosted/dhtmlkitchen/JavaScript-Query-Engines.html>
(archived)

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

Thread

apply css to elements just added Samuele Millevolte <samuele.millevolte@gmail.com> - 2013-01-22 08:02 -0800
  Re: apply css to elements just added Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-01-22 17:10 +0100
    Re: apply css to elements just added Samuele Millevolte <samuele.millevolte@gmail.com> - 2013-01-22 08:11 -0800
      Re: apply css to elements just added Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-01-22 18:11 +0100
  Re: apply css to elements just added Luc Yen <luc@goal.tw> - 2013-01-25 13:22 -0800

csiph-web