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>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/11/10 13:39:10
  • 終了:2011/11/10 18:19:59

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4367ベストアンサー獲得回数18032011/11/10 13:57:54

ポイント334pt

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/

id:ac30cc2x

動作確認しました。ありがとうございました。

2011/11/10 18:23:57

その他の回答(2件)

id:a-kuma3 No.1

a-kuma3回答回数4367ベストアンサー獲得回数18032011/11/10 13:57:54ここでベストアンサー

ポイント334pt

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/

id:ac30cc2x

動作確認しました。ありがとうございました。

2011/11/10 18:23:57
id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492011/11/10 14:29:42

ポイント333pt

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つのループ内で処理したほうがいいかなと思って、上のようにしてます

id:ac30cc2x

動作確認しました。ありがとうございました。

2011/11/10 18:24:06
id:Cherenkov No.3

Cherenkov回答回数1502ベストアンサー獲得回数4922011/11/10 14:30:12

ポイント333pt

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

id:ac30cc2x

動作確認しました。ありがとうございました。

2011/11/10 18:24:20

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません