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

このエントリーをはてなブックマークに追加
PR

あまり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の部分だけを指定すればいいのです

 

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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)