关于页面样式被隐藏的修改方法

最新推荐文章于 2024-12-27 10:35:05 发布

原创最新推荐文章于 2024-12-27 10:35:05 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#样式隐藏 #css

css样式同时被 2 个专栏收录

3 篇文章

订阅专栏

css样式隐藏

1 篇文章

订阅专栏

本文介绍了在使用EasyUI框架时，如何解决样式被覆盖的问题。提供了两种有效的方法：一是通过JavaScript动态修改元素样式，适用于引用的JS函数场景；二是重写CSS样式，适合于直接修改静态样式的情况。这些技巧有助于开发者更好地控制页面展示效果。

1. 在这里插入图片描述
2.出现这种情况，则需要在规定的样式的后台代码里面添加！important

3.这样的话就不会出现被隐藏的现象

4.但是对于easyUI这样的修改方式不奏效，需要新的方法来修改
（1）JS的修改方式，这种方式针对于引用的JS各种函数都奏效的情况
HTML部分

<input  data-options = "width:'20%',readonly:true" class="easyui-textbox" name="eee" id="eee" value="dsdsdsdssdsd"/>

JS部分

<script type="text/javascript">
            $('#eee').textbox('textbox').css('background-color','#ff00ff');
        });
    </script>

（2）重写CSS，这种方式这对于引用的函数不起作用的情况
html部分

<input  class= "tb" id="tb" type="text" readonly="readonly"  value="d4s56ad46a5">

CSS部分

    <style type="text/css">
        .tb{
            position: relative;
            border: 1px solid #95B8E7;
            background-color: #cccccc;
            vertical-align: middle;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            outline: none;
            margin: 0;
            padding: 0;
            width:300px;
            height: 22px;
            -moz-border-radius: 5px 5px 5px 5px;
            -webkit-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;
            font-size: 12px;
        }
    </style>