>如果屏幕尺寸减小,我有一个代码试图更改 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