0

JS または CSS を使用して div のカーソルのスタイルを動的に変更するにはどうすればよいですか? 複数の状況があるため...以下のコードを試しました：

    div.addEventListener("mouseover", function(evt) {
        if (tool == "BC"){
          div.style.cursor = "url(/icons/bc.cur)";
        }
        if (tool == "pan"){
          div.style.cursor = "url(/icons/pan.cur)";
        }

    }
4

1 に答える 1

2

html5 ボイラープレートのように条件付きコメントを使用していると仮定すると、このスタイルを定義できます (新しいブラウザーでは構文が異なることに注意してください。詳細については、MDN ドキュメントを参照してください)。

div.bc { cursor : url(/icons/bc.cur), auto;  }
div.pan { cursor : url(/icons/pan.cur), auto; }

/* style for IE<9 */
.lt-ie9 div.bc { cursor : url(/icons/bc.cur); }
.lt-ie9 div.pan { cursor : url(/icons/pan.cur); }

簡単にするために、div にクラスが適用されていないと仮定して、js コードを次のように変更します。

div.addEventListener("mouseover", function(evt) {
    this.className = tool.toLowerCase();
}

リストする別のカーソルがある場合、javascript をさらに変更する必要はなく、新しいいくつかの css ルールを追加するだけなので、このアプローチは優れたスケーラビリティを保証します。さらに、javascript から css を完全に切り離すことで、javascript の保守性が向上します。

于 2013-04-18T08:18:24.377 に答える