JS 根据页面像素响应事件之修改 Class 属性值

需求

根据 屏幕 或 窗口 像素自动改变 Class 属性以实现元素自适应调整内容位置。

代码

<div class="OrignalClass" id="changeClass"></div>

<script language="javascript">
    if (window.screen) {  
        var pageWidth = screen.width;  
        if (pageWidth <= 768) {  
            document.getElementById("changeClass").className="NewClass";
        }  
    }  
</script>  

说明

根据 JS 改变 Class 标签属性值 和 JS 根据页面像素响应事件之跳转目标页面 以及 前端用户界面屏幕与浏览器像素尺寸界定 的思路，我们可以在对应的像素中自适应响应事件来更改 Class 属性值。

通过获得 屏幕 像素来响应事件，并传递给 id="changeClass" 目标对象，改变 class="OrignalClass" 为 class="NewClass"。

扩展

<?php $crMarkEdition = ""; $crMarkClass = "crMarkClass"; ?>

<div class='$crMarkEdition' id='$crMarkClass'>

<script language="javascript">
    if (window.screen) {  
        var pageHeight = window.innerHeight;  
        if (pageHeight <= 628) {  
            document.getElementById("crMarkClass").className="crMarkRelative";
        }  
        if (pageHeight >= 629) {  
            document.getElementById("crMarkClass").className="crMarkFixed";
        }  
    }
</script>  

应用需求

根据 窗口 像素高度自适应 div 的位置。

本例使用的对象元素为 window.innerHeight via 前端用户界面屏幕与浏览器像素尺寸界定。

变量参数

$crMarkClass 根据像素的属性变量生成对象 ID
$crMarkEdition 自适应的变量类名