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

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

apply css to elements just added

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

Contents

  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

#18202 — apply css to elements just added

Hi,
is it possible with jQuery set a css style on elements that are just added to the DOM? (without use plugin)

Thanks in advance.

[toc] | [next] | [standalone]

#18203

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.

-- 
PointedEars

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

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

#18204

Il giorno martedì 22 gennaio 2013 17:10:11 UTC+1, 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.
> 
> 
> 
> -- 
> 
> PointedEars
> 
> 
> 
> Twitter: @PointedEars2
> 
> Please do not Cc: me. / Bitte keine Kopien per E-Mail.

ok. How?

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

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

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

#18255

Samuele Millevolte於 2013年1月23日星期三UTC+8上午12時02分37秒寫道：
> Hi,
> 
> is it possible with jQuery set a css style on elements that are just added to the DOM? (without use plugin)
> 
> 
> 
> Thanks in advance.

Try
var el$ = $("<p>some text</p>");
el$.appendTo("body"); // add to dom
el$.css({'color': 'red'}); // change style

[toc] | [prev] | [standalone]

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

csiph-web