jQuery – style属性のプロパティの値を取得・追加『 css() 』 | 1：n – DETELU Blog
※タイトルが長い間「class()」となっていましたが、「css()」の間違いです。。。 フォントの色を変更する場合、HTMLに「style=”color: #CC0000;”」等の記述をします。jQueryでも「class()」style属性を操作できます。 //id=msgの要素のstyle属性のcolorの値を取得する $("#msg").css("color"); //id=msgの要素のstyle属性にcolor:redを追加する $("#msg").css("color":"red"); //id=msgの要素のstyle属性にcolor:redとbackground-color:000000を追加する $("#msg").css({"color":"red" , "background-color":"000000"}); プロパティは一つだけでなく複数設定することができます
ひでしずのめも jqueryのセレクタで name属性を使う
セレクタが便利そうなので、jqueryを使ってみました。 elementを選択するには、 id : $("#idname") class : $(".classname") tag : $("tagname") なんてのが使える 他にも便利なセレクタがありますが、名前でも選択が可能です。 以下のように書けばいいです。 $("*[name=target]") これって・・・「name」属性が"target"のものを取得するということになります。 てことは、別に、nameじゃなくても、idでも、classでも、hrefでもlangとかでも出来るらしい。 って、ただ単に、cssの セレクタ の記述方法だけど(笑) 正規表現でマッチとかもそのうちできたらいいのになぁ～ ...cssが対応すれば出来るかも?? 先は長そうな気がする(笑)
jQuery [name=”text”]や[href=”text”]（セレクタ属性）を使用した要素の操作方法 | Stronghold Archive
どうもこんにちは。今回は…【[name=XXX]（セレクタ属性）を使用した要素の操作方法】に関する記事です。a[name=”text”]、a[href=”text”]、input[name=”text”]の用なセレクタを使った操作は地味に使えたりするので、メモ程度に書きたいと思います。 Outline 基本的にはCSSで使うセレクタと同様です。 上のように属性を指定するとanimateやcss等の操作が実行できます。 HTML <a name="link">name="link"</a> <a alt="link">alt="link"</a> <input type="text" name="input" value="input" > $(function(){ $(‘a[name=link]’).css({‘font-size’:’60px’}); $(‘a[alt=link]’).
IEの異なるバージョンごとにスタイルシートを適用する方法のおさらい
CSSやJavaScriptを使って、IE6, IE7, IE8, IE9 とIEの異なるバージョンごとにスタイルシートを適用する方法のまとめを紹介します。 Use Different Styles For Different Internet Explorer Versions [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS: 条件付きコメント(class) CSS: 条件付きコメント(外部スタイルシート) CSS: CSS Hack JavaScript JavaScript: jQuery おまけ CSS: 条件付きコメント 条件付きコメントを使用して、ドキュメントの一番上の要素(html)にIE6/7/8用のclassを付与します。 HTML <!--[if IE 6]> <html class="ie6"> <![endif]--
jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC Engineers' Blog
最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 （※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です） セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと - かちびと.net
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
画像を使わず、CSS+jQueryで絵文字を作れる・JQuery CSS Emoticonsがちょっと素敵だｗ - かちびと.net
これはちょっと面白いｗ画像を使わず、cssとjQueryだけで顔文字を作ってしまったみたいです。発想が単純だったのでうまく応用出来れば楽しいものが出来あがりそうな予感もしますな。面白い事考える人がいますね・・ｗ CSS+jQuery（と、もちろんHTML）のみで、画像は一切使われていません。ちょっとこの発想なかったです。ユニークですけど、割と使い勝手がいい気がする・・気のせいかなｗ 一見よく見かけるアイコンだと思うんですけど、これ、全部cssとテキストとjsで作られています。 からくり こういう発想。単純だけど思いつきませんでしたｗなので、以下のようにテキストとして選択できます。 :Ｄとか:ｐを縦にして、グラデーションのかかった黄色い枠を作れば完成ですね。 コード <link href="stylesheets/jquery.cssemoticons.css" media="screen"
角丸幅可変ボタンでクロスフェードをする :: 5509
角丸の幅可変ボタンを作ろうと思うと割と面倒くさいんですけど さらにクロスフェードさせたい（実質クロスフェードではないんですが） という欲望に負けてやってみました。 完成サンプル サンプルファイルのダウンロード とりあえずMacでしか確認してないのでIEとかどうなるかわかりません。 IE6で崩れてたのでCSSを修正しました。 角丸可変ボタンのHTML そもそも角丸幅可変のボタンを作ろうと思うと要素の入れ子は避けられません。 下のような感じになります。 SUBMIT ムダな要素はJSで… でもいいですけど、ここはデザインに直接影響するところなので HTML+CSSだけでやったほうがいいです。 中のSPANはあきらめてください。僕は気にしてません。 角丸可変ボタンのCSS これにCSSを書いていくと たぶん以下みたいな感じになると思います。 ボタンは2つ以上並ぶ事も想定します。 使う画像は次の2
どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
