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. mysql limit关键字

    select * from table_name limit [index, ] length; limit后面跟2个参数: index:索引号,从0开始计算,表示从哪一行开始: length:长度, ...

  2. 关于C/C++的一些思考(3)

    操作符重载函数(Operator Overload Function)的基本概念: 目的是以与对待内置数据类型相同的方式对待用户自定义类型(程序执行速度会受到影响),限制是不能随意选择函数名和参数个数 ...

  3. 记一次被面试的final问题

    ---- 前言 今天面试被问到了,我们都知道final修饰的东西是不可变的,那么是值不可变还是其地址不可变?一脸懵逼,回来查阅一番,总结一下 --- final与数据 在日常行为下,一般数据指的都是基 ...

  4. mybatis中<![CDATA[]]>的作用

    此篇文章引自QH_JAVA的文章 在使用mybatis 时我们sql是写在xml 映射文件中,如果写的sql中有一些特殊的字符的话,在解析xml文件的时候会被转义,但我们不希望他被转义,所以我们要使用 ...

  5. 使用TensorRT加速yolo3

    一.TensorRT支持的模型: TensorRT 直接支持的model有ONNX.Caffe.TensorFlow,其他常见model建议先转化成ONNX.总结如下: 1 ONNX(.onnx) 2 ...

  6. 你知道你常用的dos和linux命令吗?

    功能 Linux MS-DOS 进入到该目录 cd cd 列举文件 ls dir 创建目录 mkdir mkdir 清除屏幕 clear cls 复制文件 cp copy 移动文件 mv move 删 ...

  7. layuiAdmin 项目修改

    layuiAdmin修改 index.js 修改登录url user/login=>publics/login config.js 修改 name 项目名称, tokenName token字段 ...

  8. MySQL简单查询和单表查询

    MySQL记录操作 概览 MySQL数据操作: DML 在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括 使用INSERT实现数据的插入 UPDATE实现数据的更新 使用 ...

  9. C51 keil 注意事项

    下载程序需要生成hex文件 仿真 蜂鸣器 音调:频率 音量:高低电平占空比 有源:上面没有加号,只需高低电平即可发声 无源:上面有加号,不仅要电平,还要, 的频率

  10. 在ubuntu 18.04下装有线守护wg

    wg你懂的是什么,下面讲讲我这段时间安装过程,发觉这个软件和CENTOS 7下面不是很合拍,它更适合ubuntu,因为ubuntu仍然用iptables,而CENTOS 早就用了firewalld了, ...