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 ...
随机推荐
- hibernate5.3版本出现hibernate中The server time zone value“乱码”问题的解决办法。
<!-- 配置关于数据库连接的四个项 driverClass url username password --> <property name="hibernate.con ...
- Android之多种Bitmap效果(4)
1. 将图片变为圆角 2. 获取缩略图图片 3. LOMO特效 4. 旧时光特效 5. 暖意特效 6. 根据饱和度.色相.亮度调整图片 7. 添加图片外边框 8. 添加内边框 9. 创建一个缩放的图片 ...
- oracle获取排序后的第一条信息
查询表table1里字段id小于10的所有数据,并且让数据根据id降序排列,然后得到第一条数据 select * from (select * from table1 where id<10 o ...
- es6 day01
es6语法必须加‘use strict’ 'use strict' //预解释 变量提升 先看下边例子来感受下let的用法与特点 /* console.log(a);//undefined 只声明未定 ...
- 【2019 1月集训 Day1】回文的后缀
题意: 给定 n,s,求有多少个字符集大小为 s ,长度为 n 的字符串,使得其不存在一个长度大于 1 的回文后缀. 答案对 m 取模. 分析: 考场见到计数题的链式反应,想写暴力—>暴力难写— ...
- nginx配置location项的URL匹配规则
Localtion URL的正则匹配规则 示例 location / { try_files $uri @apache; } #所有的路径都是/开头,表示匹配所有 location @apache { ...
- Unity 3D 使用Relief Terrain Pack(RTP) 问题
Unity3D 5.2 RTP 3.2d -------------------------------------------------------------------- 使用RTP编译sha ...
- ORACLE RAC with NFS install
第一步:建立第一台节点机1).拷贝一台虚拟机做第一个节点,增加host-only的网卡 kudzu工具识别网卡(两都host-only是可以的).然后以下步骤修改相应的配置.etc/hosts内容如下 ...
- amoeba连接mysql--ERROR 2006 (HY000): MySQL server has gone away
amoeba下载地址:http://sourceforge.net/projects/amoeba/files amoeba version:amoeba-mysql-binary-2.1.0-RC5 ...
- hdu 4771好题
#include<stdio.h> #include<string.h>//通过只记录每一步此时点的状态.题非常好 #include<queue> using na ...