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. wdcp 打开网页显示 Apache 2 Test Page powered by CentOS -- 来自辉哥博客

    是因为更新过系统,安装并更新了系统自带的apache 执行这个命令即可 #ln -sf /www/wdlinux/init.d/httpd /etc/rc.d/init.d/httpd#reboot ...

  2. windows 下安装 RabbitMQ

    一.安装 RabbitMQ 前需要先安装 Erlang http://www.erlang.org/downloads 下下载对应版本的安装文件进行安装. 安装完成后配置环境变量: ERLANG_HO ...

  3. 第1节 MapReduce入门:11、mapreduce程序的入门

    1.1.理解MapReduce思想 MapReduce思想在生活中处处可见.或多或少都曾接触过这种思想.MapReduce的思想核心是“分而治之”,适用于大量复杂的任务处理场景(大规模数据处理场景). ...

  4. jQuery中Ajax事件beforesend及各参数含义1

    jQuery中Ajax事件beforesend及各参数含义 转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件. 有 ...

  5. python Matplotlib 系列教程(三)——绘制直方图和条形图

    在本章节我们将学习如何绘制条形图和直方图 条形图与直方图的区别:首先,条形图是用条形的长度表示各类别频数的多少,其宽度(表示类别)则是固定的: 直方图是用面积表示各组频数的多少,矩形的高度表示每一组的 ...

  6. python3 监控代码变化 自动重启 提高开发效率

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = 'Michael Liao' import os, sys, time, sub ...

  7. 第二周习题O题

    Description   Given a graph (V,E) where V is a set of nodes and E is a set of arcs in VxV, and an or ...

  8. UVa 1599 理想路径(反向BFS 求最短路径 )

    题意: 给定一个有重边有自环的无向图,n个点(2 <= n <= 100000), m条边(1 <= m <= 200000), 每条边有一个权值, 求从第一个点到n的最少步数 ...

  9. java实现扫二维码登录功能

    哈哈哈 http://blog.sina.com.cn/s/blog_7f416edf0102vb8h.html http://blog.sina.com.cn/s/blog_7f416edf0102 ...

  10. HDU 4945 (dp+组合数学)

    2048 Problem Description Teacher Mai is addicted to game 2048. But finally he finds it's too hard to ...