更改的文字 <h1> 如果屏幕縮小

Question

如果屏幕尺寸減小，我有一個代碼試圖更改h1的文本，這是我的實際代碼，但無法正常工作。 有人可以幫助我更正並理解它嗎？ 謝謝！

HTML

<h1 id="text1">Test</h1>

JAVASCRIPT

if($(window).width() <= 500){
$('#text1').Text('testing');  
}else{
$('#text1').Text('buuu');
}

Answer 1

您需要處理window調整大小事件。 另一種選擇是使用CSS偽代碼。

 @media (min-width: 500px) { #text1:after { content: "foo"; } } @media (max-width: 499px) { #text1:after { content: "bar"; } } 

 <h1 id="text1"></h1> 

根據Niet the Dark Absol建議進行編輯 。

 @media (min-width: 500px) { #text1 > .tiny { display: none; } } @media (max-width: 499px) { #text1 > .big { display: none; } } 

 <h1 id="text1"> <span class="big">Bigger Content</span> <span class="tiny">Smaller Content</span> </h1> 

Answer 2

也許CSS可以在這里為您提供幫助：

---

使用data- attribute屬性驗證HTML5，並使用mediaqueries顯示其價值。 標記文本本身保留在屏幕上的舊文本縮進方法。

您可以在沒有id或class情況下將其用於整個站點，但是data- attribute必須存在並填充，否則，可以在需要的地方設置class ，或僅使用id 。

  @media all and (max-width:500px) { h1 { text-indent:-9999px; } h1:before { content:attr(data-text); text-indent:0; float:left; } } 

 <h1 data-text="short text">My long text stands here</h1> 

Answer 3

您必須捕獲窗口的調整大小事件。 用jquery很容易做到。 嘗試這個：

$(window).resize(function(){
    if ($(window).width() <= 500){
        $('#text1').Text('testing');  
    }
    else {
        $('#text1').Text('buuu');
    }
});

http://jsbin.com/puzanajepe/1/edit?html,js,output