私は学校でページを作成しています。クリックしてスパンを表示して別のクリックで非表示にしたいのでjsコードを書き込みました私はクラス 'txt'を持つオブジェクトを持っていて、外部のCSSファイルで私は彼に表示を与えました:none; jsのこのコードでは、この外部プロパティは表示されません(私は思います)。 htmlでそれは、ディスプレイが表示されないのはなぜ HTML DOM(最初の要素をクリックしても機能しない場合はjs)
2nd click (not third xd) and it shows me the object
When i click an element to show me .txt object
:なし。外部CSSファイルのプロパティ?私はIDのコンテンツをdiv要素を持っているし、彼は箱-shadowプロパティを持っているが、私は、ナビゲーションにタグをクリックしたときにそれを変更するには、JSのコードを書いた::(私が試した何
は、私はもう一つの問題を抱えて行うには、私はインラインフレームimgur.com/a/41pdIでページを開くには、メニューのリンクをクリックしたときvar n = document.getElementById("content");
function hdd() {
n.style.boxShadow = '0px 0px 0px black';
}
)内部のiframeと右のコンテナボックスのボックスshadowプロパティを削除しても、それが送信されますエラーhddでnullのプロパティ 'style'を読み取ることができません。私はidからクラスに変更したときに動作しましたが、ちょっとクラッシュしました。
function gbcn(name) {
\t return document.getElementsByClassName(name);
}
var n = document.getElementById("content");
var txt = gbcn('txt');
function display(variable, number) {
var s = variable[number].style;
s.display = s.display == 'block' ? 'none' : 'block';
}
function hdd() {
\t n.style.boxShadow = '0px 0px 0px black';
}
body {
\t background-color: antiquewhite;
\t font-family: Arial;
}
#bd {
\t
}
#content-wrapper {
\t margin: auto;
\t width: 1000px;
\t height: 1000px;
}
#heading {
width:100%;
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); /*linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);*/
color: white;
opacity:0.95;
\t height: 200px;
\t border-radius: 10px;
\t box-shadow: 0px 0px 10px black;
}
#w {
\t position: relative;
\t left: 10px;
}
#m {
\t position: relative;
\t top: -60px;
\t left: 10px;
}
#j {
\t position: relative;
\t top: -225px;
\t left: 80px;
}
#cmsimg {
\t float: left;
\t width: 200px;
\t height: 200px;
}
#cms {
\t text-align: center;
\t font-size: 130px;
\t padding-top: 25px;
\t float: left;
\t width: 800px;
\t height: 175px;
\t letter-spacing: 50px;
\t text-shadow: 10px 10px 4px gray;
\t color: #263275;
}
nav {
\t float: left;
\t width: 230px;
\t height: 760px;
\t padding-left: 10px;
\t font-size: 25px;
\t line-height: 50px;
\t margin-right: 10px;
\t margin-top: 10px;
\t border-radius: 10px;
\t background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
color: white;
opacity:0.95;
box-shadow: 0px 0px 10px black;
}
iframe {
\t width: 750px;
\t height: 760px;
\t border-radius: 10px;
}
#content {
\t width: 750px;
\t height: 760px;
\t float: left;
\t margin-top: 10px;
\t border-radius: 10px;
\t background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
color: white;
opacity:0.95;
box-shadow: 0px 0px 10px black;
}
footer {
\t float: left;
\t text-align: center;
\t width: 1000px;
\t height: 30px;
\t padding-top: 10px;
\t margin-top: 10px;
\t border-radius: 10px;
\t background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
color: white;
opacity:0.95;
box-shadow: 0px 0px 10px black;
}
.li1 {
\t list-style-image: url("grafika/ww.png");
}
.li2 {
\t list-style-image: url("grafika/jj.png");
}
.li3 {
\t list-style-image: url("grafika/mm.png"); \t
}
ul {
\t -webkit-margin-before: 0px;
}
a {
\t text-decoration: none;
\t color: white
}
a:hover {
\t color: antiquewhite;
\t text-shadow: 0px 0px 5px black;
}
/*OTHER SITES*/
#wrapper {
\t margin: auto;
\t width: 700px;
\t min-height: 600px;
\t background: linear-gradient(141deg, #1fc9be 30%, #2fd9ec 80%, #3dc6f9 90%);
\t border-radius: 10px;
}
#nagłówek {
\t width: 700px;
\t /*background: linear-gradient(141deg, #0d968a 0%, #0da6b9 51%, #0a93c6 75%);*/
color: white;
opacity:0.95;
\t height: 200px;
\t border-radius: 10px;
\t box-shadow: 0px 0px 10px black;
}
#nazwa {
\t text-align: center;
\t font-size: 130px;
\t padding-top: 10px;
\t float: left;
\t width: 450px;
\t height: 190px;
\t text-shadow: 10px 10px 4px gray;
\t color: #263275;
}
#img {
\t float: left;
\t width: 200px;
\t height: 200px;
}
#obraz {
\t left: 25px;
\t top: 25px;
\t position: relative;
}
#treść {
\t width: 700px;
\t min-height: 530px;
\t margin-top: 10px;
\t border-radius: 10px;
\t /*background: linear-gradient(141deg, #0d968a 0%, #0da6b9 51%, #0a93c6 75%);*/
color: white;
opacity:0.95;
object-fit: contain;
}
.button {
\t width: 700px;
\t height: 50px;
\t display: block;
\t text-align: center;
\t font-weight: bold;
\t font-size: 40px;
\t box-shadow: 0px 0px 10px black;
\t border-radius: 10px;
}
.button:hover {
\t box-shadow: 5px 5px 10px black, 0px 0px 20px black;
\t background: linear-gradient(141deg, #1fc9be 30%, #2fd9ec 80%, #3dc6f9 90%);
}
.txt {
\t padding: 10px;
\t width: 680px;
\t text-align: justify;
\t margin-top: 15px;
\t margin-bottom: 30px;
\t border-bottom: 10px solid #0d978b;
\t border-top: 10px solid #0d978b;
\t box-shadow: 0px 0px 10px black;
\t display: none;
\t border-radius: 10px;
}
<!DOCTYPE html>
<html lang="pl">
<head>
\t <title></title>
\t <meta charset="utf-8">
\t <link rel="stylesheet" type="text/css" href="style.css">
\t <script src="js.js" type="text/javascript"></script>
</head>
<body>
\t <div id="content-wrapper">
\t \t <div id="heading">
\t \t \t <div id="cmsimg">
\t \t \t \t <img src="grafika/w.png" width="130px" height="130px" id="w">
\t \t \t \t <img src="grafika/m.png" width="130px" height="130px" id="m">
\t \t \t \t <img src="grafika/j.png" width="130px" height="130px" id="j">
\t \t \t </div>
\t \t \t <div id="cms">
\t \t \t \t CMS
\t \t \t </div>
\t \t \t <div style="clear: both;"></div>
\t \t </div>
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <a onclick="hdd()" href="wordpress.html" target="iframe"><li class="li1">Wordpress</li></a>
\t \t \t \t <a href="joomla.html" target="iframe"><li class="li2">Joomla!</li></a>
\t \t \t \t <a href="moodle.html" target="iframe"><li class="li3">Moodle</li></a>
\t \t \t </ul>
\t \t </nav>
\t \t <div id="content">
\t \t \t <iframe name="iframe" frameborder="0"></iframe>
\t \t </div>
\t \t <div style="clear: both;"></div>
\t \t <footer>99081105119</footer>
\t </div>
</body>
</html>
あなたは現在の動作を見ることができるようにあなたのhtmlも投稿できますか? –
あなたのhtmlを投稿するには、ポストを作成または編集中に "Ctrl + M"を押してコードエディタに切り替えます。他のユーザーがあなたをより良く助けるのに役立ちます。 –
私は何とか自分のページに含まれている外部ページをコードに追加できますか? – Mariuho