1

私はプログラミングにかなり慣れていないので、比較的単純な質問であると確信しています。

すべてのタグを追加したり追加したり<a>せずに、各htmlページのタグ内のリンクの色を変える（つまり、1つのページに緑色のリンクがあり、別のページに青色のリンクがある）効率的な方法を探しています。class="green"class="blue"<a>

ページごとに個別のcssドキュメントを作成できることは理解していますが、サイト全体を1つのcssページに保持したいので、包括的な変更を行うときに各スタイルシートを個別に更新する必要はありません。

<a>上位のタグのクラスに関連してタグのスタイルルールを定義する方法はありますか？たとえば、言うことは可能でしょうか

<body>
<div class="page1content">
<p>text here 
<a href="someurl.com"> link here </a> 
more text 
<a href="secondurl.com"> second link</p> 
</div>

<div class="footer">
<p>even more text
<a href="thirdurl.com"></a></p>
</div>
</body>

次に、 ？に関連して最初の2つの<a>タグを（3番目のタグに影響を与えずに）定義します。次に、各ページでそれを、などに置き換えます。<a><div class="page1content"><div class="page2"><div class="page3">

私が考えることができた他の唯一のことは、私があまり馴染みのないJavaScriptを使ってみるということでした。挿入してみました

<script type="text/javascript">
var myObj = document.getElementsByTagName("a");
myObj.style.color="green";
</script>

そのページのすべてのタグ内のテキストの色が緑色になることを期待して、特定のページに追加しました<a>が、機能していないようです。

比較として、次のように「a」を「p」に変更してJavaScriptもテストしました。

<script type="text/javascript">
var myObj = document.getElementsByTagName("p");
myObj.style.color="green";
</script>

これですべてのテキストが緑色に変わることを期待して<p>、しかしそれも機能しなかったので、初心者のために、明らかにJavaScriptを誤ってコーディングしました。

（タグ内にクラスを配置せずに）特定のページの複数の<a>タグを一度に変更する方法についての考えは大歓迎です。

ありがとう！

4

5 に答える 5

1

各body要素にIDを付けてから、CSSで子孫アンカータグ要素を選択します。

body#myBody1 a {color: red;}

body#myBody2 a {color: blue;}
于 2013-03-26T02:15:46.250 に答える
0

LIVE DEMO

次のように、BODY要素にIDを追加します。

<body id="page1">

JavaScript：

var colorStyles = {
  "page1":"fuchsia",
  "page2":"green",
  "page3":"orange"
};

// DETECT body ID (AKA pageName)
var pageName = document.getElementsByTagName("body")[0].id;

// COLLECT YOUR ANCHOR ELEMENTS
var A_obj = document.getElementsByTagName("a");

// LOOP ANCHOR ELEMENTS TO ADD .style.color
for(var i=0; i<A_obj.length; i++) {
    A_obj[i].style.color = colorStyles[ pageName ];
}

テンプレート構造が原因でIDをに追加できない場合は、body次のようにページ内にダミー要素を追加するだけではありません。

<div id="page" name="page1" style="display:none;"></div>

このJS行だけを変更します。

var pageName = document.getElementById("page").getAttribute('name');

LIVE DEMO

于 2013-03-26T02:15:14.293 に答える
0

あなたの質問の私の理解によると。次のようにあなたの答えかもしれません。間違いがある場合は訂正してください。

<style type="text/css">
   .page1content a
{
color:red;
}
      .footer a
{
color:pink;
}
</style>
<body>
<div class="page1content">
<p>text here 
<a href="someurl.com"> link here </a> 
more text 
<a href="secondurl.com"> second link</p> 
</div>

<div class="footer">
<p>even more text
<a href="thirdurl.com"></a></p>
</div>
</body>
于 2013-03-26T02:16:19.750 に答える
0

純粋なHTMLとCSSでこれを行うための手段はすでにあります。Javascriptは必要ありません。

つまり、2つのクラス内のコンテンツをターゲットにします。また、pとタグを閉じるのを忘れました。

例：

CSS

#content1 p {
    color: green;
}

#content1 a {
    color: yellow;
}

#content2 p {
    color: blue;
}

#content2 a {
    color: red;
}

HTML

<div id="content1">
    <p>Text here <a href="someurl.com">and link here,</a> more text <a href="secondurl.com"> second link</a></p>
</div>

<div id="content2">
    <p>Text here <a href="someurl.com">and link here,</a> more text <a href="secondurl.com"> second link</a></p>
</div>

リンク：

http://jsfiddle.net/vA369/2/

于 2013-03-26T02:24:24.410 に答える
0

例としてあなたのコードを取り上げましょう。

  1. タグの<a></a>デフォルトの色があります。必要に応じ<a></a>て、上部と同じ色にします。<p></p>

    <p>text here <a href="someurl.com"> link here </a> more text <a href="secondurl.com"> second link</p>

    CSSを再挿入する必要があります。<style>a{color:inherit}</style>

  2. CSSを変更することでそれを行うことができます。

    <style>.page1content a {color:red}</style>

    これは、クラスが「page1content」であるdivのタグ「a」の色を意味します。

  3. あなたが言ったようにあなたはまたjavascriptを通してそれをすることができます。

    しかし、あなたは間違いを犯しました。getElementsByTagName1つだけでなく、配列を返します。配列にはすべての結果が含まれます。

    たとえば、あなたは最初のものを得ることができ<p>...</pます document.getElementsByTagName('p')[0]

于 2013-03-26T02:38:13.517 に答える