API/1.2/CSS　スタイルの取得とコントロール

いろは CSS

そもそも、スタイル指定の宣言ブロックとか、わかりにくい名前

名称
p#id{ color : #ff3300 }
セレクタ{プロパティ:値}
セレクタ宣言ブロック
規則集合

jQueryでのスタイルの指定

@import規則
headerにembed　styleが記述されていると仮定して、以下のように記述できそうです。
ただし、<!-- -->や　<sample>/*<![CDATA[*/…/*]]>*/</sample>といった表現を組み合わせた場合。
<>がescapeされます。&60;&62;などでも、&amp;60;になります。

jQuery("style").prepend("@import url(\"test.css\") all;");
単一のプロパティを適用
$(".alert").css("color","red");

とは言うものの、ショートハンドは使えるのか

$(".alert").css("border","3px double #aaa");

使えます。


複数のプロパティを適用

複数プロパティの指定についての注意
下の例の場合では、backgroundColorというプロパティは、cssの指定ではなくて、javascriptのスタイルの指定です。
私の場合は、javascriptぜんぜんわかりませんので、スタイルシートの指定で書きたい。
確認できた確かなことではありませんが、"background-color"というようにプロパティをダブルクウォートで囲むと、指定が可能なようです。

$(".alert").css({ "background-color":"yellow", fontWeight:"bolder" });


プロパティ一覧
CSS2プロパティ一覧 | 日経 xTECH（クロステック）
http://www.red.oit-net.jp/tatsuya/java/reference/style.htm

html5じゃfieldset廃止だろうから、今のうち使ってやるぞ

スクリプトによるスタイルの適用について、

.cssを使わなくても、他の方法で追加することも可能。

例えば：

jQuery(".alert").attr("style","border:1px solid red;margin:1em;padding:1em;background:#aaf");

などと書くことのほうが、htmlをやっている人にとっては、いいかもしれない。

DOMで書いているんじゃなくて、htmlなら、この結果に批判的な人は多いだろう。
つまり、べたなインライン指定なんて、怠け者呼ばわりされるからだ。

他にも

jQuery("style").append(".alert {border:1px solid red;margin:1em;padding:1em;background:#aaf}");

でも、いいのかもしれない。「<!--こういうやつの問題と、IE7エラー出る、その点は後で」
※IE7 予期しないプロパティアクセスというエラーが発生しました。
jQuery1.2.2で問題なく動作しました。jQueryの問題ではなさそうです。


ユーザーエージェントの分岐 + css
$.browser  
$("#test_result").append(  
    "This user agent is " + ($.browser.mozilla ? "" : "not ") + "a mozilla."  
).append("<br>");
htmlドキュメント構造と、視覚的だったり、ユーザー補助機能だったりの分離

htmlには、文書としての構造を担い、視覚的なことは、スタイルが担う。という理想があります。
しかし、視覚的な設定を行おうとすると、ほとんどの場合、htmlに、視覚表現のための構造が生まれます。
なぜか、CSSは、htmlに依存しているからです。（エレメントのないところにスタイルは、作れないので）

だから、理想なのだと私は、感じています。

Link

ページトップへ戻るリンクや、ページの特定のセクションにリンクは、ユーザーにとっては、必要な機能ですが、htmlとして場合必ずしも必須ではなく、できれば、メタボに苦しむ私のhtmlを、jQueryでダイエットしてやりたい







CSS:スタイルの値の取得と適用

NameType
css( name )
Returns: String
最初にマッチしたスタイルプロパティの値を返す。
css( properties )
Returns: jQuery
引数のオブジェクトに指定した、プロパティと値を適用する。
css( name, value )
Returns: jQuery
プロパティ名と値をひとつ適用する
Positioning:位置の取得
NameType
offset( )
Returns: Object{top,left}
最初にマッチしたエレメントの、オフセット値　relativeな　offset.left offset.top
Height and Width:幅と高さの取得と設定
NameType
height( )
Returns: Integer
最初にマッチしたエレメントの高さを返す
height( val )
Returns: jQuery
マッチしたエレメントの高さを引数の値に置き換える
width( )
Returns: Integer
最初にマッチしたエレメントの幅を返す
width( val )
Returns: jQuery
マッチしたエレメントの幅を引数の値に置き換える