人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavaScriptについての質問です。
Pタグ内の文字間隔を2種類設定し下記のように処理しています。ID名による指定の為、それぞれ1度しか使用できません。”<p id="p1">テスト</p><p id="p2">テスト</p>”の部分をコピー&ペーストで増やされるとIDが重複し機能しなくなります。”<p class="p1">テスト</p><p class="p2">テスト</p>”のようにclassで処理したいのですがJavaScriptはどのようになるのでしょうか?
※文字間隔をスタイルシートで処理しないのはJavaScriptでなければならない事情があるからです。

<html>
<script language="JavaScript"><!--
var space1 = 5;
var space2 = 2;
function ls(){
p1.style.letterSpacing = space1;
p2.style.letterSpacing = space2;
}
//--></script>
</head>

<body onload="ls()">
<p id="p1">テスト</p>
<p id="p2">テスト</p>
</body>
</html>


●質問者: ac30cc2x
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● a-kuma3
●334ポイント ベストアンサー

jQuery を使ってますが、こんな感じでしょうか?

<script type="text/javascript" src="http://www.hatena.ne.jp/js/jquery-1.4.2.min.js"></script>
<script>
var space1 = 20;
var space2 = 10;
$().ready(function() {
 $(".p1").css({"letterSpacing" : space1});
 $(".p2").css({"letterSpacing" : space2});
});
</script>
<body>
<p class="p1">テスト</p>
<p class="p2">テスト</p>
</body>

jsFiddle で、お試しコードを書いてみました。

http://jsfiddle.net/ZuWdp/1/


ac30cc2xさんのコメント
動作確認しました。ありがとうございました。

2 ● うぃんど
●333ポイント

JQueryなどのライブラリを使わない例

<html>
<head>
 <script language="JavaScript"><!--
 var space1 = '50px';
 var space2 = '20px';
 function ls(){
 for each(var s in document.getElementsByTagName('p')) {
 if(s.className == "p1"){
 s.style.letterSpacing = space1;
 } else if(s.className == "p2"){
 s.style.letterSpacing = space2;
 }
 }
 }
 //--></script>
</head>

<body onload="ls()">
 <p class="p1">テスト01</p>
 <p class="p2">テスト02</p>
 <p class="p1">テスト11</p>
 <p class="p2">テスト12</p>
 <p class="p1">テスト21</p>
 <p class="p2">テスト22</p>
 <p class="p1">テスト31</p>
 <p class="p2">テスト32</p>
</body>
</html>

getElementsByClassNameを使うのとどっちがいいか迷ったのだけど、

同じタグで、クラス毎に処理を変えるのなら、

一括取得して1つのループ内で処理したほうがいいかなと思って、上のようにしてます


ac30cc2xさんのコメント
動作確認しました。ありがとうございました。

3 ● Cherenkov
●333ポイント

jQueryを使わない方法

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var space1 = 5;
var space2 = 2;
function ls(){
 var p = document.getElementsByTagName('p');
 for (var i=0, n=p.length; i<n; i++) {
 if (p[i].className == 'p1')
 p[i].style.letterSpacing = space1;
 else if (p[i].className == 'p2')
 p[i].style.letterSpacing = space2;
 }
}
</script>
</head>
<body onload="ls()">
<p class="p1">テスト</p>
<p class="p2">テスト</p>
<p class="p1">テスト</p>
<p class="p2">テスト</p>
</body>
</html>


CSSを追加する関数を用意すればこうも書けます。

demo: http://jsfiddle.net/cherenkov/x9Ak8/

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function ls() {
 //ここに適用させたいCSSを書く
 addCSS('.p1 {letter-spacing: 5px;} .p2 {letter-spacing: 2px;}');
}

function addCSS (css){
 if (document.createStyleSheet) { // for IE
 var sheet = document.createStyleSheet();
 sheet.cssText = css;
 return sheet;
 } else {
 var sheet = document.createElement('style');
 sheet.type = 'text/css';
 var _root = document.getElementsByTagName('head')[0] || document.documentElement;
 sheet.textContent = css;
 return _root.appendChild(sheet).sheet;
 }
}
</script>
</head>
<body onload="ls()">
<p class="p1">テスト</p>
<p class="p2">テスト</p>
<p class="p1">テスト</p>
<p class="p2">テスト</p>
</body>
</html>

参考:主要ブラウザで動くCSSを追加する関数 - 0xFF


ac30cc2xさんのコメント
動作確認しました。ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ