みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

jqueryのCSSについてお聞きしたいのですが、

本体にCSSを書くと正常に動きます
.defaultlist,.defaultlist li{
padding:0px;
margin:0px;
}

外部リンクのjQueryだと下記だと正常に動きません
$(".defaultlist,.defaultlist li").css({
"padding":"0px",
"margin":"0px"
});

下記のサイト(設計力を学ぶデザインドリル)をみても書き方が問題ないと思います。
http://www.jquerystudy.info/reference/selectors/multiple2.html

外部リンクのjQueryで正常に動作させるにはどうしたらよろしいでしょうか。

投稿日時 - 2016-12-17 18:46:10

QNo.9269463

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

追記というか訂正と言うかです。

「外部リンクのjQueryだと下記だと正常に動きません」

と書いてありましたね。
ということは

<script src="hoge.js"></script>

として読み込んでるということですね。

まず確認ですが、自作の外部javascriptファイルを読み込む前に、jqueryのファイルは読み込んでますか?

<script src="../js/jquery-3.1.1.min.js"></script>
<script src="hoge.js"></script>


もしここまで間違いないなら解決方法は2つ

1,hoge.jsを読み込む位置を変更

<header></header>内にて
<script src="hoge.js"></script>と読み込んでいるなら

</html>のとじタグあたりに書くか

<script src="hoge.js"></script>
</html>

2,内容を変更
$(document).ready(function(){
$(".defaultlist,.defaultlist li").css({
"padding":"0px",
"margin":"0px"
});
});

意味としてはブラウザが全部読み込んでからfunction内の処理をしてねってこと


解決方法としては2が一般的です。

投稿日時 - 2016-12-18 12:27:38

ANo.1

まず

javascriptの便利な機能で補助してくれるjavascriptで書かれたjqueryというプログラムと、HTMLの見た目を司るCSSとは全くの別物です。

javascriptからCSSの操作も出来るだけです。


んでもって
$(".defaultlist,.defaultlist li").css({ 。。。。。
ですが、記述は正しいと思います。

ただ、どこに書いてるのでしょうか?
たとえばHTMLの<header>~</header>に
<script>
$(".defaultlist,.defaultlist li").css({ 。。。。。

</script>

って書いてるのあれば動かないでしょう。
そのscript部分が走るまでに.defaultlist,.defaultlist li なんてものは出てきてませんから、「あ そんなものねーし スルースルー」ってスルーされます。
<header>までにbody以下の内容書いてもまだ出てないからわかんねーって事です。

もしそうであれば一番簡単な方法は
</html>の直前に<script>~</script>を書いて下さいHTMLの一番最後であれば全部のHTMLでてきてるでしょうから?「あ! その部分ね!」とプログラムが理解します。

その他 $(document).ready(・・・・といった事も出来ますが とりあえずここまで・・・・・

投稿日時 - 2016-12-17 22:19:38

あなたにオススメの質問