• 締切済み

属性の削除について

属性の削除を行いたいのですが、親オブジェクトの記述が解りません。 詳しい方教えてください。 <script type="text/javascript"> <!-- 親オブジェクト = document.getElementByID("ID名"); 削除するオブジェクト = document.getElementByID("ID名"); 親オブジェクト.removeChild(削除するオブジェクト); // --> </script> HTML <div class="image"> <a href="○○○.gif" title="" rel="△△"><img src="○○○.gif"></a> </div>

noname#180555
noname#180555

みんなの回答

  • honeborn
  • ベストアンサー率100% (4/4)
回答No.2

外したいノードが分かってるならparentNodeでいいんじゃないかな。 あと属性と要素、idとclassは別もんだよ。

noname#180555
質問者

お礼

回答有難うございます。 parentNodeを調べてみます。 属性・要素とidとclassは同じものだと思っていました。 ご教授感謝いたします。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

ここでいう属性とはなんでしょうか? こういうこと? <a id="hoge" href="hoge.jpg" alt="fuga">hoge</a> <script> var obj=document.getElementById('hoge'); alert(obj.getAttribute('alt')); obj.removeAttribute('alt'); alert(obj.getAttribute('alt')); </script>

noname#180555
質問者

お礼

回答有難うございます。 idとclassを一緒に考えていたのでそこから見直してみることにしました。 考えて頂いたのに申し訳有りません。

関連するQ&A

  • onclick属性に外部jsと外部cssの記載方法

    表題の通りclickイベントを付与したいのですが、記載方法が分からなくて困っています。 例) <div id="sample1"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='block'; document.getElementById('sample1').style.display='none'">ぴーしー</a> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </div> <div id="sample2" style="display:none"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='none'; document.getElementById('sample1').style.display='block'">もばいる</a> </div> 上記のままだと更新ボタンを押さないと反映されなかったので、onclick属性にjquery.mobileを付与したいと思いまして。toggle,appendToなども試しましたが、挙動がおかしかったので、有志の方、代換え方法や助言をお願いします。

  • getElementByIdの戻り値がnullになります。

    getElementByIdでdivタグのオブジェクトを取得したいのですが、nullとなってしまいます。 以下のコードのどこがいけないのでしょうか。 --- <div id='a'></div> <script language="javascript">// <!-- var a_ = document.getElementById('a'); document.write(a_); // --></script> ---

  • リンク押下でタグを書き換えたい

    リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>

  • ソースの初歩的な質問です

    スタートを押下したら、alertの"消します""出します"の通りに、 obj.gifが反応するようにするソースを作成したいです。 以下のソースでは対象オブジェクトが見つからないという エラーが返ってきてしまいます。 どの様に修正すればよいのか教えてください。 宜しくお願い致します。 <html> <head> <script type="text/JavaScript"> function Start(lyrball) { alert("消します"); document.getElementById(lyrball).style.visibility = "hidden"; alert("出します"); document.getElementById(lyrball).style.visibility = "visible"; } </script> </head> <body> <a href="JavaScript:Start()">スタート</a> <div id="lyrball"> <img src="obj.gif"> </div> </body> </html>

  • 展開メニューの修正

    展開メニューの修正 をしています。 menu.js------------------------ function block(id){ if(document.getElementById){ if(document.getElementById(id).style.display == "none"){ document.getElementById(id).style.display = "block"; }else if(document.getElementById(id).style.display == "block"){ document.getElementById(id).style.display = "none"; } } } html--------------------------- <div onMouseOut="block('block1')"> <div onMouseOver="block('block1')"><a href="***">コンテンツ名</a></div> <div id="block1" style="display: none;"> <ul> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="***">サブコンテンツ</a></li> <li><a href="****">サブコンテンツ</a></li> </ul></div></div> 「コンテンツ名」に触った時展開して、サブコンテンツor「コンテンツ名」から離れた時にサブコンテンツを閉じる、という挙動まではできているのですが、 サブコンテンツのメニュー間を移動する際にちらつくというかいちいち閉じてしまうのを直したいのですが、どうしたらいいのでしょうか? よろしく御教授ください。

  • 折たたみメニューの表示・非表示

    JavaScriptで下記のような折りたたみ(階層)メニューを作成しています。 <script type="text/javascript"> <!-- /* ブラウザ判別 */ var ie=document.all ? 1 : 0; var ns6=document.getElementById&&!document.all ? 1 : 0; var opera=window.opera ? 1 : 0; /* 子メニューの表示・非表示切替 */ function openFolder(childObj, parentObj){ var child=""; var parent=""; var sw="../../images/blanc.gif"; /* フォルダ表示時のアイコン画像 */ var hd="../../images/blanc.gif"; /* フォルダ非表示時のアイコン画像 */ if(ie || ns6 || opera){ child=ns6 ? document.getElementById(childObj).style : document.all(childObj).style; parent=ns6 ? document.getElementById(parentObj) : document.all(parentObj); if (child.display=="none"){ child.display="block"; parent.src=sw; }else{ child.display="none"; parent.src=hd; } } } //--> </script> <div id="open_1" style="display:none;"> <a href="01.html"><img src="images/list_01.gif"></a><br> <a href="02.html"><img src="images/list_02.gif"></a><br> </div> <div id="open_2" style="display:none;"> <a href="03.html"><img src="images/list_03.gif"></a><br> <a href="04.html"><img src="images/list_04.gif"></a><br> </div> <div id="open_3" style="display:none;"> <a href="04.html"><img src="images/list_03.gif"></a><br> <a href="05.html"><img src="images/list_04.gif"></a><br> </div> ここで、<div id="open_1">内のリンクをクリックして01.htmlに遷移した際、01.htmlでも<div id="open_1">内の階層が表示されているようにしたいのです(下のふたつの階層についても同じです)。 過去ログなどを調べまして、 <script type="text/javascript"><!-- function keepOpen(){ document.getElementById('x').style.display = "block"; document.getElementById('y').style.display = "block"; }keepOpen(); //--></script> を挿入すればいけそうでやってみたのですが、今度は開きっぱなしになってしまいます。二日ほど調べたのですが、よい解決策が見つかりません(また、<div>の中のソースはすでにphpのコードを組込んでいるので、できれば中の部分はいじりたくありません)。 お詳しい方、大変恐れ入りますが、どうぞご教示くださいませ。 よろしくお願いいたします。

  • JSで動的にリンクを作成

    JSで動的にリンクを作成をしたいのですがわかりません。 例を教えてもらったのですがどう書いていいのかわかりません…。 駄目な例: <div id="link"> <a href="http://aaa.aa/">aaaa</a> </div> いい例 <div id="link"></div> <script> document.getElementByID("link") に対してaddChild </script> いろいろ不足していると思いますがお願いします。

  • rel属性の値を無効にする方法

    <a href="http://" rel="設定値">リンク</a> rel属性の値を無効にしたいのですが、Javaスクリプトなどで可能でしょうか? 当方まったくJavaスクリプトに対して知識はありません。 もし可能な場合、具体的な記述を教えてください。 宜しくお願い致します。

  • 画像メニューの開閉

    JavaScriptで画像メニューの開閉を行いたいのですが、 うまく動きません。 「aaa」が閉じていた場合には「aaa」を開くまではできたのですが、 「bbb」を閉じるという1行を追加したら動かなくなりました。 どなたかご教授願います。 【JavaScript】 function showSubmenu01() { if(document.getElementById("aaaSub").innerHTML == '') document.getElementById("aaaSub").innerHTML = '<img src="aaa.gif">'; document.getElementById("bbbSub").innerHTML = ''; else document.getElementById("aaaSub").innerHTML = ''; } 【HTMLソース】 <ul> <li><a href="#" onClick="showSubmenu01()"><img src="img/menu_aaa.gif" /></a></li> <li><div id="aaaSub"></div></li> <li><div id="bbbSub"><img src="bbb.gif" /></div></li> </ul>

  • IEだけで動きません。Javascriptに関する質問です。

    IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう? 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html>   <head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script>   </head> <body>   <div id="container">   </div>       <div id="menu">    <ul>    <li><a href="javascript:changeObj('a.htm')" title="a">a</a></li>    <li><a href="javascript:changeObj('b.htm')" title="b">b</a></li>    <li><a href="javascript:changeObj('c.htm')" title="c">c</a></li>    </ul>   </div>     </body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html>  <head> <script type="text/javascript" src="bbb.js"></script>  </head>   <body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div>   </body> </html>

専門家に質問してみよう