質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1192閲覧

クリックで指定要素のCSSを変えるjavascript

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/12/29 13:33

ラベルをクリックすると、

html, body { overflow: hidden; }

html, body { overflow: visible; }

になるような処理を狙って次のように書いてみたですが、サッパリ動いてくれません。

どなたかスパっと間違いを教えて下さいませ。<(_ _)>

php

1<label for="label1"> 2<div class="z1"> 3<p class="z2"> 4<?php echo get_post_meta($post->ID, 'testchan', true); ?> 5</p> 6</div> 7</label> 8 9 10<script> 11document.getElementById("label1").onclick = function() { 12 $("body").css("overflow", "visible"); 13}; 14</script>

css

1html, body { 2 overflow: hidden; 3}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

jqueryは使えないということで

javascript

1document.getElementById("label1").onclick = function() { 2 document.querySelector('body').style.overflow = "visible"; 3};

こういう感じでしょうか。

投稿2017/12/29 23:36

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/12/30 01:51

おはようございます。ワガママにお付き合い頂き感謝いたします。無事できました。これを基本の型として覚えておきます。
guest

0

質問に答えていただきありがとうございます。では早速ですが
jqueryが使えるのか使えないのかがコード上ではよくわかりません。
なぜdocument.getElementById("label1")を使っているのですか?
使えるなら普通はこんな感じになるはずなのですが

javascript

1 $("#label1").click(function(){ 2 $("body").css("overflow","visible"); 3 }); 4

投稿2017/12/29 14:33

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/12/29 14:48

たびたびありがとうございます。実はjqueryはwordpressへの導入に数日かけてできなかったことがあり、そのまま敬遠しております。今回もjqueryの方法は検索によく出ていたのですけれど、そのままphpファイルに書くだけで実装できるという点に惹かれているためにjavascriptによる方法を探している次第です。 などと、ワガママ放題で大変恐縮なのですが笑、なんとか、javascriptでもう一声、頂けませんでしょうか? ちなみに >なぜdocument.getElementById("label1")を使っているのですか? についてですが、その文字が意味する内容もよくわからず、ひとまずこちら(https://techacademy.jp/magazine/15062)にあったコードをそれっぽくアレンジして質問の形になったという経緯です。
sousuke

2017/12/29 23:28

お早うございます。 $("body").css("overflow","visible"); そもそもなんですがこの記述はjqueryの記述です。つまりjqueryがないと動かないはずです。 jqueryを使わない前提であれば「$」は一切使えません。
guest

0

overflowは設定された要素を超える幅、高さをどう見せるかという指定ですが
htmlとbodyを超える幅や高さのものが内側にあるんですか?

投稿2017/12/29 13:50

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/12/29 14:02

ご回答ありがとうございます。 仰るとりです。一時的に画面全体に広がるアニメーションがかかっておりまして、その際にズレを調整するためにhiddenが必須なのです。 しかしhiddenがあるままだとこれまた困るので、ラベルのクリック後にはhiddenくんは用済みなのです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問