Path: csiph.com!newsfeed.hal-mli.net!feeder3.hal-mli.net!newsfeed.hal-mli.net!feeder1.hal-mli.net!newsreader4.netcologne.de!news.netcologne.de!newsfeed.arcor.de!newsspool1.arcor-online.net!news.arcor.de.POSTED!not-for-mail
Content-Type: text/plain; charset="UTF-8"
Message-ID: <12353775.PuHDcb6yyP@PointedEars.de>
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Reply-To: Thomas 'PointedEars' Lahn <usenet@PointedEars.de>
Organization: PointedEars Software (PES)
Date: Tue, 22 Jan 2013 18:11:42 +0100
User-Agent: KNode/4.4.11
Content-Transfer-Encoding: 8Bit
Subject: Re: apply css to elements just added
Newsgroups: comp.lang.javascript
References: <6b42013a-58d3-4cb5-be46-b1e6e70e23a3@googlegroups.com> <2675343.dW1zcIqFus@PointedEars.de> <6a1119d7-6f7e-42c5-9ce1-b26f65e33913@googlegroups.com>
Followup-To: comp.lang.javascript
MIME-Version: 1.0
Lines: 86
NNTP-Posting-Date: 22 Jan 2013 18:11:43 CET
NNTP-Posting-Host: 48cd18db.newsspool4.arcor-online.net
X-Trace: DXC=6>5:JT^5oddf1oJaJ0@dmg4IUK<Cl32<a4Fo<]lROoRa8kF<OcfhCOkj]Fh:bfXX[mDZm8W4\YJNlb@mF9jNikdekf[So:RoGLce1XN@;b4cRl
X-Complaints-To: usenet-abuse@arcor.de
Xref: csiph.com comp.lang.javascript:18206

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.