0

nogginに問題があります...この質問に答えるのを手伝ってください：

cssの文字列に1文字を追加することは可能ですか？（元の文字列を保存し、特定の位置に文字を追加することによると思います）

これが私のコードです：

.u_usa{
background-image: url(../images/icons/usa_24.png);
}

私が探しているのは、onclickでcssプロパティを次のように変更することです。

.u_usa{
    background-image: url(../images/icons/usa_24t.png);
    }

次に、クリックしたら元に戻します（「t」を削除します）。..

問題は、同じ関数を使用したいクラスがいくつかあり、それぞれが背景画像の場所が異なることです。変わらないのは、1つの画像にある画像とない画像です...

どのクラスを変更しても、cssプロパティの1文字を簡単に変更できる関数が1つ必要です（どのクラスが関数を呼び出しているか）。

よろしくお願いします。私のジバーリッシュな投稿でわからない場合は、私はしばらくの間これらの問題に取り組んでおり、この1つの項目を除いてほぼすべてを修正しました。

ありがとうございました...

編集：私が達成しようとしているのは、実行時にcssスイッチを実行する関数を作成することですが、それを実行しているクラスはすべて動的です。背景のある60以上の異なるdivがあります。クリックすると、css背景画像のURLの4番目から最後の文字位置に「t」を追加または削除します。

4

5 に答える 5

2

デュアルクラスセレクターを使用して、クラスごとに2番目のCSSルールを追加する必要があります。例：

.u_usa {
    background-image: url(../images/icons/usa_24.png);
}

.u_usa.clicked {
    background-image: url(../images/icons/usa_24t.png);
}

次に、イベントハンドラーで、適切な要素にクラスをonclick追加または削除します。clicked

于 2012-07-18T06:23:33.393 に答える
1

いくつかのアプローチがあります：

クラスの切り替え

あるクラスで1つの背景画像を指定し、別のクラスで別の背景画像を指定します。1つのクラスを持つすべての要素を検索し、それらをループして、1つのクラスを削除し、もう1つのクラスを追加します。同じクラスの要素が100未満の場合はかなり高速ですが、それ以上の要素がある場合は遅くなる可能性があります。

背景画像に基づいて要素を選択し、変更します

非常に遅く、計算集約的です。少数の要素でも問題ありませんが、それだけです。

スタイルルールを変更する

適切なスタイルシートでスタイルルールを見つけて、background-imageプロパティの値を変更します。それはより多くのコードです（関数を最初から作成する必要がある場合でも、適切な関数を見つけてコードコレクションに追加できると確信しています）。変更する必要のある要素の数に関係なく、非常に高速です。唯一の欠点は、クラスのすべての要素が変更されることです。toggleメソッドのように、ロジックに基づく要素を除外することはできません。

あなたの選択。

于 2012-07-18T06:30:03.703 に答える
0

まず、クラスの代わりにスタイルをインラインにすることができます。

次に、以下のコードスニペットを使用します

通常の画像から「t」画像へ

var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('.png','t.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;

逆に

var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('t.png','.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;

または

2つの異なるクラスを作成し、背景画像を変更する必要があるたびにクラスを変更します

document.getElementsByClassName('className')[0].setAttribute('class','newClassName');
于 2012-07-18T06:15:31.143 に答える
0

JQueryでaddClass関数を使用して、button.courseをクリックすると、これを実行できます。javascriptなしでは実行できません。

于 2012-07-18T06:16:32.323 に答える
-2

それは私が恐れているCSSでは不可能です。その機能を作成するには、javascriptを使用するか、jQueryなどのライブラリを使用する必要があります。

于 2012-07-18T06:11:53.427 に答える