如果屏幕缩小，请更改 <h1> 的文本

Change text of <h1> if screen is reduced

本文关键字：h1 文本 缩小 屏幕 如果      更新时间：2023-09-26

>如果屏幕尺寸减小，我有一个代码试图更改 h1 的文本，这是我拥有的实际代码，但不起作用。有人可以帮助我纠正和理解它吗？谢谢！

.HTML

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

JAVASCRIPT

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

使用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>

也许CSS可以在这里帮助你：

使用data-属性来验证 HTML5，并使用媒体查询来显示其值。旧的文本缩进方法，用于在标签本身中保留屏幕文本时擦除。

您可以在没有id或class的情况下使用它，但data-属性需要在那里并填充，否则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>

您必须捕获窗口的大小调整事件。用jquery很容易做到.试试这个： 

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

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

相关文章：