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 ...
随机推荐
- B1. Concurrent 多线程的创建
[概述] 多线程的创建常用的有两种方法:1). 继承 Thread 类: 2). 实现 Runnable 接口: 3). 实现 Callable 接口. [继承 Thread 类] /** * 1. ...
- RabbitMQ之六种队列模式
先学习一下RabbitMQ中的六种队列,只学习前五种,具体的官方文档地址是:http://next.rabbitmq.com/getstarted.html 导入maven依赖: <depend ...
- 解决 python No migrations to apply 无法生成表
第一步: 删除该app名字下的migrations文件. 第二步: 进入数据库,找到django_migrations的表,删除该app名字的所有记录. delete from django_migr ...
- Linux基础学习一
swap:虚拟内存ctrl+a:跳到命令首部 ctrl+e:跳到命令尾部alias:指令别名cp -r:递归复制粘贴mv 源路径 目标路径:移动操作 (如果提示是否覆盖,在mv前加\即可不提示:\mv ...
- Python使用selenium实现网页用户名 密码 验证码自动登录功能
一.安装selenium 二.下载谷歌浏览器驱动 1.去http://chromedriver.storage.googleapis.com/index.html下载chromedriver.exe( ...
- java中装箱与拆箱
转载自:https://www.cnblogs.com/dolphin0520/p/3780005.html 自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来一些看一下装箱和拆箱中的若 ...
- nyoj 96 n-1位数(处理前导 0 的情况)(string)
n-1位数 时间限制:3000 ms | 内存限制:65535 KB 难度:1 描述 已知w是一个大于10但不大于1000000的无符号整数,若w是n(n≥2)位的整数,则 ...
- noip模拟赛 轮换
分析:模拟题,关键就是要理解题目意思.m≥3的轮换可以拆成m=2的小轮换,小轮换的话只需要交换一下就可以了. #include <cstdio> #include <cstring& ...
- vim状态栏的扩充
将以下内容添加到~/.vimrc文件中: set statusline= set statusline+=%7*\[%n] " ...
- codeforces Gym 100735 D、E、G、H、I
http://codeforces.com/gym/100735 D题 直接暴力枚举 感觉这道题数据有点问题 为什么要先排下序才能过?不懂.. #include <stdio.h> #in ...