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 ...
随机推荐
- 子例程 subroutine
#! /usr/bin/perluse strict;use warnings;print "\n---------summation_STDIN_parameter----------\n ...
- super(Student,self).__init__()初始化的是什么东西?
继承不是为了继承里面原来的属性和值么,不初始化的话,会有什么问题? 2015-04-04源自:python进阶 5-17642 浏览2 回答 最佳回答 2015-05-05 1 super(Stude ...
- VM虚拟机中CentOS6.4操作系统安装一
在 VMware中鼠标单击“编辑虚拟机设置”,在弹出的“虚拟机设置”对话框中的“硬件”标签中选择“CD/DVD(IDE)”,然后在右侧的“CD /DVD(IDE)”连接选项中选择“使用ISO映像文件” ...
- 集训第六周 数学概念与方法 J题 数论,质因数分解
Description Tomorrow is contest day, Are you all ready? We have been training for 45 days, and all g ...
- 将文件大小kb转换成M
得到文件的大小的一般是直接到得到的是文件的字节大小,也就是kb,我们有的时候需要做单位换算成B或者M, 下面方法只是换成M,没有到G, 有更好的方法,请随时沟通,以便交流学习,谢谢. public s ...
- java中装箱与拆箱
转载自:https://www.cnblogs.com/dolphin0520/p/3780005.html 自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来一些看一下装箱和拆箱中的若 ...
- BNUOJ 26223 CosmoCraft
CosmoCraft Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: ...
- POJ1094 / ZOJ1060
#include <cstdio> #include <cstring> #include <stack> #include <iostream> us ...
- readdir() 获取文件类型
readdir()获取文件类型 //// 字符设备文件 type =2, filename207=tty0 crw-rw---- 1 root root 4, 0 04-10 16:28 ...
- ****Call to a member function item() on a non-object
A PHP Error was encountered Severity: Error Message: Call to a member function item() on a non-objec ...