タグに直接記述されている特定のスタイルをデフォルトの状態に戻すJavaScriptコードをご紹介します。
えぇ、今回はかなり限定的な使い方しかできないコードですが、困ったときに使えると思うので記事にしてみます。
こんなhtmlを変更します。
<p class="target" style="color:#ff0000;padding:5px;background:black;">テキスト</p>
jQueryでやる方法
結構初歩的なjQueryコードだと思いますが、書いておきます。
特定のスタイルを取り除く方法
colorを取り除く場合は下記コードです。
$('.target').css('color', '');
複数のスタイルを取り除く方法
colorとpaddingを取り除く場合は下記コードです。
$('.target').css({color: '', padding: ''});
複数のスタイルを同時に扱う場合は、{}で括るとまとめて書くことができます。
深くは説明しませんが、この書き方だとスタイルを囲うシングルクオテーションも不要です。
全てのスタイルをまとめて取り除く方法
全てのスタイルを取り除く場合は下記コードです。
$('.target').removeAttr('style');
style属性ごと取り除いちゃえば楽ですね。
JavaScriptのみでやる方法
jQueryを使わず、JavaScriptで書く場合は長くなります。しかもid、class、タグ名で書く場合はそれぞれ違う書き方で書く必要があります。
idの場合
id指定で書く場合はこんな感じになります。
<p id="target" style="color:#ff0000;padding:5px;background:black;">テキスト</p>
var elms = document.getElementById('target');
elms.style.color = '';
滅多には無いと思いますが、1ページに同じid名を使っているhtmlもたまに見かけます。本来idはユニークなものであるべきで、1ページに同じ名前のidがあってはいけないのですがね。。。
その場合も考慮して書くとこうなります。
var elms = document.all.item('target');
if(elms.length){
for(var i = 0, len = elms.length; i < len; i++){
elms[i].style.color = '';
}
}else{
elms.style.color = '';
}
長ったらしいですね。。。
classの場合
class指定で書く場合はこんな感じです。
<p class="target" style="color:#ff0000;padding:5px;background:black;">テキスト</p>
var elms = document.getElementsByClassName('target');
for(var i = 0, len = elms.length; i < len; i++){
elms[i].style.color = '';
}
タグ名の場合
最後にタグ名版のコードです。
<p style="color:#ff0000;padding:5px;background:black;">テキスト</p>
var elms = document.getElementsByTagName('p');
for(var i = 0, len = elms.length; i < len; i++){
elms[i].style.color = '';
}
ここまで書いておいてなんですが、このJavaScript版はこんなに書いても取り除けるスタイルはcolorだけです。
それ以外のスタイルも取り除きたい場合はそれぞれに追記しないといけません。
JavaScript版だといちいち覚えるの面倒だし、jQuery版でも複数のスタイルを変更するのがちょっと手間に思えてきたので、関数化しちゃいました。
関数版jQueryコード
スクリプトにこの関数を書いておくと簡単にスタイルを取り除くことができます。
function removeStyle(elm, removeStyleArray){
for(var i = 0, len = $(elm).length; i < len; i++){
var thisElm = $(elm).eq(i);
for(var b = 0, lenb = removeStyleArray.length; b < lenb; b++){
thisElm.css(removeStyleArray[b], '');
}
}
}
背景とフォント色をリセットしたーい！という場合は以下のコードでリセットできます。
removeStyle('div', ['background', 'color']);
最初の引数には対象のセレクタを指定をし、第二の引数に取り除きたいスタイルを配列形式で指定してください。
次のように書けば#sampleのスタイルを外すようなコードとなります。
removeStyle('#sample', ['background', 'color']);
実際の動きを見たい方はサンプルをjsdo.itへアップしましたので、そちらでも確認できます。
関数版JavaScriptコード
とっても長ったらしくなってしまいますが、JavaScriptだけで書くとこうなります。
「うちのサイトではjQueryなんぞ使わん」という強者のみこちらのスクリプトをどうぞ。
function removeStyle(elm, removeStyleArray){
var elms, selector, d = document;
if(elm[0] == '#'){
selector = elm.replace('#', '');
elms = d.all.item(selector);
if(!elms.length) return styleStrip(elms);
}else if(elm[0] == '.'){
selector = elm.replace('.', '');
elms = d.getElementsByClassName(selector);
}else{
selector = elm;
elms = d.getElementsByTagName(selector);
}
for(var i = 0, len = elms.length; i < len; i++){
styleStrip(elms[i]);
}
function styleStrip(elm){
if(elm.getAttribute('style')){
var styles = elm.getAttribute('style').toLowerCase();
var thisStyles = styles.split(';');
thisStyles.pop();
for(var i = 0, len = thisStyles.length; i < len; i++){
var prop = thisStyles[i].split(':')[0];
for(var b = 0, lenb = removeStyleArray.length; b < lenb; b++){
if(prop == removeStyleArray[b]){
elm.style[prop] = null;
}
}
}
}
}
}
これでも短めに書いたつもりですが、長い・・・ですね。
こっちのコードはそこまで検証してないのであまり自信無しです。
サイトにjQueryを既に読み込んでいる方は迷わずjQuery版関数を使ってください！
JavaScript版も同様のコードでリセットできます。
removeStyle('div', ['background', 'color']);
こちらのサンプルもjsdo.itへアップしましたので、興味のある方のみどうぞ！
ではでは、よき開発ライフを～。