Question

如果屏幕小于...，如何更改div中的文字？

<a href="#">View full profile</a>
if(screen <= 768) {
   <a href="#">View</a>
}

抱歉，我是Javascript的新手。我见过类似的问题，但其中任何一个都有正确答案。

我知道我可以使用css来实现这一点，但我不想重复html代码只是为了隐藏/显示元素。

Answer 1

HTML：

<a id="viewLink" href="#">View full profile</a>

使用Javascript：

// Get the window width
if (window.innerWidth < 768) {

    // If less than 768
    document.getElementById('viewLink').innerText = 'View';
    // Change the link text to View.
}

Answer 2

脚本

if (window.innerWidth < 768) {
document.getElementById('viewLink').innerText = 'View'; 
}

和HTML

<a id="viewLink" href="#">View full profile</a>

Answer 3

尝试使用此处的媒体查询：

//css
@media screen and (max-width: 768px) {
    .tablet {
        display: none; 
    } 
}
@media screen and (min-width: 769px) {
    .phone { 
        display: none;
    }
}

//html
<a href="#" class='tablet'>View full profile</a>
<a href="#" class='phone'>View</a>

Answer 4

你可以尝试这种方法......

if (window.innerWidth < 768) {
    $('#hide').hide();
}

<a href="#">View <span id="hide">full profile</span></a>

Answer 5

  <a id="viewText" href="#">View full profile</a>
    <script type=text/javascript>
    $(document).ready(function () {

        if (screen.width < 768) {
            $("#viewText").show();
        }
        else {

            $("#viewText").hide();
        }

    });
    </script>

更改屏幕尺寸上的文字

5 个答案: