CSS和JS结合控制样式
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结合控制样式的更多相关文章
- 苏宁易购微信端 wx ios android other 通过js来控制样式
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><meta name=&qu ...
- 改变某个对象的CSS样式时,不要使用JS直接添加样式,
重绘: 使用js改变网页的背景颜色 浏览器会把整个网页的颜色重新在画一遍,导致性能降低 回流: 只要改变某个DOM对象的宽或者高,浏览器就会重新再计算网页结构,重新生成一次,导致性能严重降低. CSS ...
- 今天写了一个SSM小项目,运行之后,前端页面的CSS、js样式显示不出来,具体操作如下:
因为SSM中我们设置了拦截器,拦截器会拦截CSS和JS,所有样式渲染不出来,在Web.xml中写上 1 <servlet-mapping> 2 <servlet-name>de ...
- CSS控制样式的三种方式优先级对比验证
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...
- [css或js控制图片自适应]
[css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...
- SpringMVC配置了拦截器(interceptors)却显示不出css、js样式的解决办法
首先因为在web.xml里面配置了 <filter-mapping> <filter-name>characterEncodingFilter</filter-name& ...
- 来,一起让我们越来越懒,面向CSS、JS未来编程。(9.28已更新)
2016.10.29更新 本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点 ...
- HTML、CSS、JS在前端开发中都扮演怎样的角色
前端开发,需要经常接触 HTML.DOM.CSS.JS等,那么HTML.CSS.JS在前端开发中究竟扮演怎样的角色呢?以下是个人的一些观点... HTML:超文本标记语言 (Hyper Text Ma ...
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...
随机推荐
- Server.MapPath() 用法
Server.MapPath() ./当前目录/网站主目录../上层目录~/网站虚拟目录 如果当前的网站目录为E:\wwwroot 应用程序虚拟目录为E:\wwwroot\company 浏览的页 ...
- Java调用WebService接口实现发送手机短信验证码功能,java 手机验证码,WebService接口调用
近来由于项目需要,需要用到手机短信验证码的功能,其中最主要的是用到了第三方提供的短信平台接口WebService客户端接口,下面我把我在项目中用到的记录一下,以便给大家提供个思路,由于本人的文采有限, ...
- 一次URL请求过程--tomcat
一:请求的过程 1.DNS域名解析 2.建立TCP连接(三次握手) 3.发送请求--tomcat进行处理 4.四次挥手关闭连接 二:详解1---DNS域名解析 1.浏览器会检查缓存中有没有这个域名对应 ...
- h5移动端常见虚拟键盘顶起底部导航栏解决办法
在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...
- js 技巧 (四)
//下载文件 function DownURL(strRemoteURL,strLocalURL) { try { var xmlHTTP=new ActiveXObject("Micr ...
- Hadoop-2.7.1伪分布--安装配置hbase 1.1.2
hbase-1.1.2下载地址:http://www.eu.apache.org/dist/hbase/stable/hbase-1.1.2-bin.tar.gz 下载之后解压至\usr\local目 ...
- 87-Moving average of oscillator,移动平均振荡指标.(2015.7.4)
Moving average of oscillator 移动平均振荡指标 ~计算: OSMA = MACD-SIGNAL 注释:OSMA的值即为MACD中两个主要指标线的差值 ~思想: 该指标当作一 ...
- 3D标签云
一.圆的坐标表达式 for(var i = 0;i < len;i++){ degree = (2*(k+1)-1)/len - 1;a = Math.acos(degree);//这样取得弧度 ...
- Codeforces Round #352 (Div. 2),A题与B题题解代码,水过~~
->点击<- A. Summer Camp time limit per test 1 second memory limit per test 256 megabytes input s ...
- 第五章、 Linux 常用網路指令
http://linux.vbird.org/linux_server/0140networkcommand.php 第五章. Linux 常用網路指令 切換解析度為 800x600 最近更新 ...