私はこのコードブラウザのサイズ変更時にdiv要素のIDを変更するにはどうすればよいですか？
<div id="123"></div>
を持っている私は、メディアクエリを使用していますが、私はそれが
可能ではないと思いブラウザは<div id="234"></div>
をリサイズしたときに234にIDを変更したいですあなたがやろうとしているが、これは、ゾルことができるもの
@media screen and (max-width: 479px) {
#123 {
}
}
イムわかりません
一般に、要素IDを変更する必要はありませんが、必要に応じて、ウィンドウのサイズを変更するときに要素が持つIDを推定するために、いくつかの論理がonresize関数に必要です。
ませんjQueryの答え
window.onresize = function(event) {
if(document.getElementById('123') != null)
document.getElementById('123').id = '234';
};
ただ、しかし、あなたはそれはCSSクラスを追加し、削除することによって行われるべきであるとして、スタイルを変更するためにあなたのIDを変更すべきではない、慎重ID 234が別の要素に割り当てられていないこと。
あなたが正しいです！これは、CSSで行うことは可能ではないが、それにはJavaScript & /またはjQueryを使って行うことが可能です。 jQueryを使用して、これを試してみてください：
$(window).on('resize',function() {
$('#123').attr('id','234');
});
上記コードの問題、それは1xの変更のみであるということです。最初のサイズ変更後にそのIDを再ターゲットすることはできません。したがって、ブラウザーが2〜3ピクセルでサイズ変更されたことを検出すると、JSは破損します。
本当の問題は、あなたがサイズ変更にIDを変更したいと思う理由は、ありますか？ data-id：のようなHTML 5 data-*属性を変更する方が良いだろう。これにより、#myUniqueId属性を使用して繰り返し変更することができます。次に、ウィンドウのサイズを変更している間は、コードを継続して実行する必要があります。ここで
このコードのjsfiddleです：
HTML：
<div id="myUniqueId" data-id="123"></div>
<div id="output"></div>
のjQuery：
$(window).resize(function() {
var id = $('#myUniqueId').attr('data-id');
id++;
$('#myUniqueId').attr('data-id',id);
// Double check: what is my id?
var myId = $('#myUniqueId').attr('data-id');
$('#output').html(myId);
});
あなたが携帯用に異なるCSSを使用することができますので、私は似たコードを使用しますまたはデスクトップ...しかし、それは完全に私を苛立たせる。
このように、同じIDまたはクラスを使用します。しかし、画面の大きさに応じて、何か違うことが起こります。
@media not all and (min-width:999px){
/* Big Screen */
body {background-color:green; }
#id { background-color:red}
}
@media all and (min-width:1000px)
{
/* Smaller Screen */
body {background-color:blue; }
#id { background-color:grey}
}
マウスを使用して手動で画面のサイズを変更すると、カラーが自動的に小さいCSSに変わります。
これは、javascriptまたはjQueryで簡単に行うことができます。 JSで書かれた例です。
window.onresize = function(){
var div = document.getElementById("aaa");
if(div){
div.setAttribute("id", "bbb");
}
}#aaa {
font-size: 10px;
}
#bbb {
font-size: 10em;
}<div id="aaa">Resize</div>私はあなたのために、この1つの作業を願っています。
//detect window resize
$(window).resize(function() {
//test if window width is below 479
$(window).width() < 479 ? small() : big();
//small function is called when window size is smaller than 479
function small(){
//edited from $("#id_changer").append("<div id='123'>123</div>");
document.getElementByID('id_changer').innerHTML = "<div id='123'>123</div>";
}
//big function is called when window size is bigger than 479
function big(){
//edited from $("#id_changer").append("<div id='234'>234</div>");
document.getElementByID('id_changer').innerHTML = "<div id='234'>234</div>";
}
});
<body>
<div id="id_changer"></div>
</body>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="test.js"></script>
新しいIDを追加する前に古いDIVを削除しないので、同じIDを持つ複数のDIVが作成されます。 – Barmar
「id」を変更する目的は何ですか？異なるCSSスタイルを適用できる唯一の目的はありますか？それで、メディアのクエリは正しい軌道に乗ります。 – KevBot