CSS控制样式,毋庸置疑。但有时,仅靠CSS却很难控制好,比如说,页面在多种条件下进行不同的呈现;或者运行过程中,会发生变化,比如说,左侧的菜单栏收缩了,那么右侧的宽度就变大了。

就拿这个元素的width、height来说,页面变了,预先设定的值就不合适;甚至乎,从一开始,你就不知道该预先设定什么值,因为前端的浏览器各种各样,类似height:100%这样的好像不起作用。CSS可能支持一些表达式,但我没怎么用过,印象中有说法说会有浏览器兼容问题,或者是性能问题。

这时应该换一种思路,用JS,jQuery来控制。

例子如下:

<script type="text/javascript">
$(function(){//这是一个在页面加载完成后执行的函数
$("#div1").css("height",($(document).height() - 133) + "px");
$('.bottomTabs').css('position',"relative");
});
</script>

版权声明:本文为博主原屙文章,喜欢你就担走。

CSS和JS结合控制样式的更多相关文章

  1. 苏宁易购微信端 wx ios android other 通过js来控制样式

    <!DOCTYPE HTML><html><head><meta charset="UTF-8"><meta name=&qu ...

  2. 改变某个对象的CSS样式时,不要使用JS直接添加样式,

    重绘: 使用js改变网页的背景颜色 浏览器会把整个网页的颜色重新在画一遍,导致性能降低 回流: 只要改变某个DOM对象的宽或者高,浏览器就会重新再计算网页结构,重新生成一次,导致性能严重降低. CSS ...

  3. 今天写了一个SSM小项目,运行之后,前端页面的CSS、js样式显示不出来,具体操作如下:

    因为SSM中我们设置了拦截器,拦截器会拦截CSS和JS,所有样式渲染不出来,在Web.xml中写上 1 <servlet-mapping> 2 <servlet-name>de ...

  4. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  5. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  6. SpringMVC配置了拦截器(interceptors)却显示不出css、js样式的解决办法

    首先因为在web.xml里面配置了 <filter-mapping> <filter-name>characterEncodingFilter</filter-name& ...

  7. 来,一起让我们越来越懒,面向CSS、JS未来编程。(9.28已更新)

    2016.10.29更新 本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点 ...

  8. HTML、CSS、JS在前端开发中都扮演怎样的角色

    前端开发,需要经常接触 HTML.DOM.CSS.JS等,那么HTML.CSS.JS在前端开发中究竟扮演怎样的角色呢?以下是个人的一些观点... HTML:超文本标记语言 (Hyper Text Ma ...

  9. 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件

    找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...

随机推荐

  1. html嵌入pdf && html嵌入多媒体文件,word,flash,pdf,音视频

    <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="1000" hei ...

  2. linux 服务脚本

    #!/bin/bash # # chkconfig: # description: my_SERVICE_NAME is a my Service # # common function . /etc ...

  3. windows事件查看器

    如果一个软件发生异常,软件本身没有提示异常信息, 需要从事件查看器中查看产生的错误事件 运行输入eventvwr或者win + X

  4. UVa 712 S-Trees(二进制转换 二叉树叶子)

    题意: 给定一颗n层的二叉树的叶子, 然后给定每层走的方向, 0代表左边, 1代表右边, 求到达的是那一个叶子. 每层有一个编号, 然后n层的编号是打乱的, 但是给的顺序是从1到n. 分析: 先用一个 ...

  5. HttpURLConnection绕过HTTPS的SSL验证

    (这个jdk环境需要是1.8,以上). 直接在类里面加一个static代码块 static { try { trustAllHttpsCertificates(); HttpsURLConnectio ...

  6. Oracle on Azure

    价格列表 https://azure.microsoft.com/en-us/marketplace/partners/msopentech/oracle-db-12c/ Oracle-Base 安装 ...

  7. JS数组添加元素的三种方式

    1.push() 结尾添加 数组.push(元素) 参数 描述 newelement1 必需.要添加到数组的第一个元素. newelement2 可选.要添加到数组的第二个元素. newelement ...

  8. 【Linux】date命令用法详解(日期格式)

    inux下date命令用法 date [OPTION]… [+FORMAT] date [-u|--utc|--universal] [MMDDhhmm[[CC]YY][.ss]] date命令参数 ...

  9. Windows 10 & Game Bar & YouTube & video records

    Windows 10 & Game Bar & YouTube & video records Windows 10 C:\Users\xgqfrms\Videos\Captu ...

  10. HDU 4968 (水dp 其他?)

    +;],dp1[][],dp2[][]; map<      memset(GPA,,     ;i<=;i++) hash[i]=;     ;i<=;i++) hash[i]=; ...