jQueryでHTML要素にある属性を removeAttr()を使って消す方法

Tweet

238

あまりHTMLにある属性 style=””やwidth、height、等々を消す機会ってあまりないと負います
逆に付け足すってことは多いと思います。もしくは付けたり消したりをtogglecalssでやったり

でも必要なときもある！

私が必要になったケースはimgタグにwidthとheightがあると うまく画像の拡大・縮小をパーセントで操作できなかった。widthとheightが無いと上手くいく。でもimgタグにwidthとheightは必須項目です 空白でもだめです。なのでHTML構文的には付けなくちゃいけないし、CMSとかそういうのは自動で付けてしまいますし。あとwidthとheightが無いとページの読み込み速度ダウンに繋がる。

そこで役立つのがjavascript、そしてjQueryです
javascriptはすでにあるHTMLからブラウザ側で削除するので構文的には問題なし！

すでに読み込んだあとに動作するので、ページの読み込み速度ダウンにもならない

removeAttr()を使ってHTML要素から属性を削除する

      $("#single img").removeAttr("width height");

こんな書き方です

id=”single” の要素の中にある imgを対象に

widthとheightを削除という文です

removeAtterのカッコ内には複数の属性を指定可能、指定の方法は間にスペースです

属性というのは width＝”300px” となっていたらこのwidthの部分だけを指定すればいいのです

一行だけでできるんで、かなりお手軽で使える

Tweet

短縮URL:

2014年04月22日 WEB制作系 jQuery