javascriptで困っています。

質問

Javascriptで
<div id='abc' class='xyz'>
とあるdivタグに２つめのclass属性を追加したり、削除するにはどうしたらいいのでしょうか？
よろしくお願いします。

回答No.2

yambejp · ベストアンサー

解説しましょう

＞var n=document.getElementById("abc");
「abc」というidのついたタグをnとします。

＞var reg=new RegExp('(^| )hoge(?= |$)');
正規表現オブジェクトを宣言しています
(^| )・・・先頭「^」もしくはスペースの後ろにある
hoge・・・hogeという文字
(?= |$)・・・後ろはスペースか末尾「$」
ちなみに正規表現というのは複雑なマッチングをするときに使う規則で
慣れるまで書式がわかりにくいので、やる気がある場合は一度
勉強してみると思い白いかも。

＞var cn=n.className;
nのクラス名をとりあえずcnという名前をつけておいて

＞n.className=cn.match(reg)?cn.replace(reg,''):cn+' hoge';
nの新しいクラス名は
さっきつくった正規表現オブジェクトregにマッチするか？
マッチするならcnのマッチした箇所を削除する（''と置き換える）
マッチしないならcnにスペース+hogeをつける。
「xxx?yyy:zzz」という構文は三項演算子といってif文に近い感じの処理です

ちなみに微妙なゴミが気になる場合は
n.className=(cn.match(reg)?cn.replace(reg,''):cn+' hoge').trim();
といったトリムをする処理を入れた方がベター

お礼

ありがとうございます
丁寧な解説でとてもよくわかりました。
調べているときに、正規表現という言葉をときどき見かけていたのですが、何かよく分からずとばしていました。今回解説していただいたことを期に勉強したいと思います。プログラム初心者にも分かりやすい解説ありがとうございました。また、よろしくお願いします。

回答No.1

yambejp

たとえばこんな感じ

<script>
function changeabc()
{
var n=document.getElementById("abc");
var reg=new RegExp('(^| )hoge(?= |$)');
var cn=n.className;
n.className=cn.match(reg)?cn.replace(reg,''):cn+' hoge';
}
</script>
<style>
.xyz{color:red;}
.hoge{background-Color:yellow;}
</style>
<div id='abc' class='xyz'>123</div>
<input type="button" value="go" onclick="changeabc()">

お礼

ありがとうございます。思っていたようになりました。
素早い対応をしていただき、本当に助かりました。

クリックするたびにclass属性をつけたり、とったりしているんですよね。まだまだプログラミングの初心者なので、作っていただいたもんが、どんな内容か理解できません。もし、よかったら、解説などよろしくお願いします。肝心な部分の
var reg=new RegExp('(^| )hoge(?= |$)');
と
n.className=cn.match(reg)?cn.replace(reg,''):cn+' hoge';
が理解できていません。中でも^|や?はどうよういうことを表していますか？