• ベストアンサー

jQueryでCSSのプロパティに変数を付与

javascriptで、ブラウザの種類を判別し変数prefix にfirefoxなら-moz-、webkitなら-webkit-を格納するスクリプトを作成しました。 jquery1.7にてCSSを操作する際に $("#hoge").css({ prefix + "animation-name" : "name", prefix + "animation-duration": "5s" }); と記述した所、構文エラーになってしまいました。 ｊQueryでCSSの値に変数を使用することはできるようですが、プロパティに変数を使用することは出来ないのでしょうか？

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

ANo1です。 ＞普通にjavascriptからstyleを操作する場合ではプロパティに変数を付与出来たのですが、 ＞jQueryでは構文エラーが出てしまいました 逆のはずです。 通常のjavascriptではオブジェクトを引数にはできないはずでは？ どのような書き方をなさっているのか不明ですが、手元にあったjQuryv1.5.2とv1.7.1で確認してみましたが、 　$("#hoge").css(propertyList); で、実行できますし、エラーも出ないようです。

otyanoco
質問者

お礼

申し訳ございません、単純なミスだったようです。 propertyList[prefix + "Animation"] = "anim 1 2s ease"; $("#hoge").css(propertyList); で動かなかったのですが propertyList= []; を付け足すことで動作しました。 ご教授頂きましてありがとうございました。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

通常のプロパティリストでは、プロパティをクォーテーションで囲まなくてもよくなっていますので、エラーの原因は、変数とプロパティ名との区別が付かないところに由来しているのではないでしょうか？（←想像です。ちゃんと調べたわけではありません。） プロパティ名に変数を用いたければ、引数そのものを変数にしておいて 　propertyList[prefix + property] = value; などのようにして代入することで対応可能かと思います。

otyanoco
質問者

お礼

お礼が遅くなってしまい申し訳ございませんでした。 ご教授頂いた書き方で試してみたところ、普通にjavascriptからstyleを操作する場合ではプロパティに変数を付与出来たのですが、jQueryでは構文エラーが出てしまいました。 ご回答いただきありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 次のhtml・cssでspan内の文字を点滅させる

    次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。 但し、テスト1が表示されている間は、テスト2と3は消えており、 テスト2、3が表示されている間はテスト1が消えている状態にしたいです。 なぜか、反復の意味を持つdurationタグの後ろに連結して、duration:blinkはできませんでした。 <div class="test"> <span class="brinking1">テスト1</span> <span class="brinking2">テスト2</span> <span class="brinking3">テスト3</span> </div> <style> .test { margin: auto; background-color: white; position: relative; } .test blinking { width: 50%; animation-name: test; -webkit-animation-name: test; animation-duration:blink 10s; -webkit-animation-duration: 10s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; opacity: 0;} .test .brinking1 { display: block; margin: 0 auto; } .test .brinking2,.test .brinking3 { animation-delay:5s; -webkit-animation-delay:5s; position: absolute; top: 0; left: 25%; } @keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } </style>

    • 締切済み
    • CSS
  • jQueryの導入について

    お世話になります。 PHPでサイトを構築しているのですが、 AJAXを導入したくてjQueryのAJAXライブラリを使おうと思っております。 jQueryは従来のJavaScriptとは違い、 構文の書き方やイベント処理等が、 独特な書き方になると思います。 jQueryを使用する際は、 すべてのJavaScriptをjQueryの方式で構文を書くか、 必要箇所だけjQueryを使用し、 あとは従来のJavaScriptの方式で構文を書くか悩んでいます。 今後どちらの方が良いでしょうか。 ちなみに私はすべての構文をjQuery風に書いた方が、 スマートになるかなと思っております。 よろしくお願い致します。

  • jQuery　変数の使い方について

    jQuery　変数の使い方について 【やりたいこと】 ラジオボタンが複数ある為現在のアクションをまとめたい。 ■ $("input:radio[name='radio01']:checked").val(); の'radio01'の部分に変数を使いたい。 ■document.forms["MON"].hradio02.value の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。 http://kaicoo.blogspot.jp/2012/03/query_30.html 等を参考に元のソースから JSをまとめてみましたが、うまくいきません。 jQuery内の変数の記述方法を 教えていただけませんでしょうか？ よろしくお願いいたします。 ★JSをまとめたサンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal(obj) { var formname = obj.form.name; var radioname = obj.getAttribute('name'); alert(formname); alert(radioname); //選択したラジオのvalueをhiddenに格納する document.forms[formname].h '+ radioname +' .value = $("input:radio[name='+ radioname +']:checked").val(); alert(document.forms[formname].h '+ radioname +'.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr> <td> 結果: </td> <td> <input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html> ★元のソースのサンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_01(obj) { document.forms["MON"].hradio01.value = $("input:radio[name='radio01']:checked").val(); alert(document.forms["MON"].hradio01.value); } //--> </script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_02(obj) { document.forms["MON"].hradio02.value = $("input:radio[name='radio02']:checked").val(); alert(document.forms["MON"].hradio02.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr><td> 結果: </td> <td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html>

  • jQuery　変数を複数のセレクタに適用する。

    jQueryを書き始めの初心者ですが、よろしくお願いします。 一度書いたものを（DOMをいじる程度ですが） jQueryを高速化のため、スクリプトを現在、見直しています。 HTMLは以下な感じです。 <ul id="hoge"> <li><a>項目1</a><li> <li><em>項目2</em><li> </ul> 上記の各liの、さらに中の要素（aとem）を取得するために、 今まで以下のように書いていたのですが $("#hoge li a, #hoge li em").css("font-weight","bold"); これを、変数(hoge)を使って、書き換えたいと思います。 var hoge = $("#hoge li"); 複数セレクタを指定しているのですが、 この場合、セレクタを一気にまとめて書くのは難しいのでしょうか？ ↓のように書くしかないのでしょうか？ hoge.find("a").css("font-weight","bold"); hoge.find("em").css("font-weight","bold"); なんか、あまりスマートではないので、 良い方法がありましたら、教えていただけたらと思います。 どうぞ宜しくお願いいたします。

  • C++の変数の初期化

    C++を勉強中です。JavaやC#、JavaScriptといった言語はひととおり使えます。 C++におけるクラスHogeの変数hogeの初期化で、以下のふたつの構文では意味が違うようですが、どのように違うのでしょうか？ Hoge hoge; Hoge hoge();

  • スクロールで画面が読み込まれたら動くようにしたい

    下記html、cssでテキストを動くようにしたのですがjavascript(jquery)で スクロールで画面が読み込まれたら動くようにしたいのですがどうすれば良いでしょうか。 素人なのでコピペで教えて欲しいです。 html <body> <section> </section> <div class="heading"> <div> <p class="slide-up">テキスト</p> </div> <div> <p class="slide-up">テキスト</p> </div> <div> </div> </body> </body> </body> css body, html { width: 100%; font-family: 'Times New Roman', Times, serif; } section { height: 200vh; } .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } .heading { margin: 80px 0 0 80px; font-size: 15em; line-height: 90%; } .heading>div { overflow: hidden; } .heading>div>p { width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap; margin: 0; } div.heading>div { -webkit-animation-delay: 1s; animation-delay: 1s; } .slide-up { -webkit-animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; } @-webkit-keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } } @keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } }

  • スクロールで画面が読み込まれたら動くようにしたい

    html、cssでテキストを動くようにしたのですがjavascript(jquery)で スクロールで画面が読み込まれたら動くようにしたいのですがどうすれば良いでしょうか。 html <body> <section> </section> <div class="heading"> <div> <p class="slide-up">salon</p> </div> <div> <p class="slide-up">info</p> </div> <div> </div> </body> </body> </body> css body, html { width: 100%; font-family: 'Times New Roman', Times, serif; } section { height: 200vh; } .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } .heading { margin: 80px 0 0 80px; font-size: 15em; line-height: 90%; } .heading>div { overflow: hidden; } .heading>div>p { width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap; margin: 0; } div.heading>div { -webkit-animation-delay: 1s; animation-delay: 1s; } .slide-up { -webkit-animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; } @-webkit-keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } } @keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } }

  • ブログパーツのjquery利用について

    ブログパーツでjqueryを使用してhtmlなどを出力したいのですが、 思い通りの動作ができません。 jsファイルの中身 ------------------------------------------------------------ document.write("<script type='text/javascript' src='http://hoge.com/jquery.js'></script>"); document.write('<link rel="stylesheet" type="text/css" href="http://hoge.com/hoge.css">'); $(function() { $("div").html("<p>aaaaaaaaa</p>"); }); document.write('<div></div>'); ------------------------------------------------------------ これじゃあ、ほかのサイトからjsを読み込んでも 出力されないのでしょうか？ （<script src="http://hoge.com/hoge.js"></script>） document.write("<div>aaa</div>");だけであれば、 ちゃんと出力されるのでjqueryの記述がおかしいのだと思います。 ご教授お願いいたします。

    • ベストアンサー
    • AJAX
  • CSSやJavaScriptの使用の法律問題

    jQueryやJavaScriptで画像やテキストを自動で切り替える 方法の法律的な事について、今回お聞きしたく思います。 jQueryはCSSに属したプログラミング言語だと理解しています。 またJavaScriptもプログラミング言語で、ホームページなど でCSS同様に使われていると理解しています。 この「画像を自動的に切り替える」ためのCSS(jQuery)や JavaScriptを使用を考えているのですが、どのような 手続きを得た方が良いのか、お聞きしたく今回投稿しました。 具体的には、CSS(jQuery)やJavaScriptは知的財産に該当 する分野だとは認識しています。 常識的に、勝手に承諾を得ずに使用しても良くない、また 使用料の契約問題も発生するのではないかと思っています。 CSS(jQuery)の使用については開発者に承諾を得ればよい とか、JavaScriptの使用については、承諾を得て、かつ使用 料の問題も発生すると言った具体的な事をお聞きしたく思い ます。 CSS(jQuery)やJavaScriptの使用について、深くご存じの方に お聞きしたく思います。

  • JQueryの変数の扱いで弱っています。

    お世話になります。 JQuery初心者です。 ３日程、ハマリ、行き詰まったので、相談させて下さい。 アマゾンのレビューの「レビューは参考になりましたか？」「はい」「いいえ」の 様なものを作りかけています。 その際、以下の様な記述をしています。 （肝心な部分抜粋） ---------------------------------------------- 大元　　　正常に稼働 ---------------------------------------------- <!-- JQuery --> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(){ $("#form1").submit(function() {　　　　　　　 //●●●この　　#form1　　の部分を変数にしたい var str = $(this).serialize(); 処理 }}; --> </script> </head> <body> <form id="form1" method="post" action="">　　　　//●●●#form1とはコノ部分 <select name="option"> <option value="yes" selected>参考になった</option> <option value="no">参考にならなかった</option> </select> <input type="submit" name="submit" value="投票する"/> </body> </html> ---------------------------------------------- 上記の記述で正常に稼働しています。 が、1つのページにフォームを複数作り、それぞれのフォームにIDをふって、 それぞれ正常に稼働させたいのです。 そこで、javascriptの $("#form1").submit(function() {　 ここの　　　#form1　　　部分を変数にして、複数のフォームに対応させたいと思っています。 が！ 以下の様に改良したところ、正常に稼働しません。 ---------------------------------------------- 以下、改良部分　　　うまく稼働せず ---------------------------------------------- -------javascript部分 $("input").click(function(){ //●●●ここを改良 変数作成 id2= $(this).attr("class"); sharp="#form"; id3 = sharp + id2; }); $("id3").submit(function() {　　　　　　　//●●●ここを改良 変数指定 -------フォーム部分 <form id="form1" method="post" action=""> <input type="submit" name="submit" value="投票する" class="1"/>　　　　　//●●●ここを改良 class="1"　を追加 ------------------------------------------------- つまり、classの「1」をjavascript部分で読み取って、#form　の文字列と組み合わせて　　　　#form1 として、機能させたいのですが、うまくいきません。 （何故か、$("#form"+id2)　の部分がうまく機能しません。） ※要は複数のフォームのidに、１つのjavascriptで対応させたいだけで、 上記の様な、まわりくどいやり方には全くこだわっていません。 どうか、迷える子羊に愛の手を！

    • ベストアンサー
    • AJAX

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する