htmlpretty插件经过安装后测试,效果很棒,安装过程简要说明如下:在Sublime Text中,按下Ctrl+Shift+P调出命令面板;输入install 调出 Install Package 选项并回车;输入pretty,并在列表中选择HTML-CSS-JS Prettify后回车即可安装快捷使用方法:举例:打开一个压缩的jquery.min.js文件,按下Ctrl+Shift+H 原文:http://www.cnblogs.com/zhja/p/5144509.html
JavaScript访问修改样式表,可以方便的动态修改页面:一、访问元素中style属性的CSS样式这个可以直接使用style对象方便的访问,例如:<div id = "mdiv" >....</div> 访问CSS的方法是: <script type="text/javascript">//获得元素var oDiv = document.getElementyId("mdiv");//访问元素的style对象,再访问对象中的属性,也可以修改属性的值,直接为他赋值alert(oDiv.style.backgroundColor);</script> 二、访问外部定义的CSS样式(类定...
在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则,除此之外,JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:CSS:把样式表置于顶部 避免使用CSS表达式(Expression) 使用外部JavaScript和CSS 削减JavaScript和CSS 用<link>代替@import 避免使用滤镜 JavaScript把脚本置于页面底部 使用外部JavaScript和CSS 削减JavaScript和CSS 剔除重复脚本 减少DOM访问 ...
使用HTML+CSS+javascript实现简易计算器奉上在javascript学习期间写的小程序(简易计算机)一、先上图:二、实现过程:1.页面结构如下:<body><div id="sDiv"><div id="show"><div id="showme"></div></div><input type="text" id="result" readOnly="true" value="0"><br><input type="button" onclick="s(‘0‘)" id="res" class="btncss" value="C"><input type="button" onclick="operator(‘backspace‘)" id="del" class="b...
CSS补充
position: ##多层
a. fiexd => 固定在页面的某个位置 ##返回顶端
b. relative + absolute
<div style=‘position:relative;‘>
<div style=‘position:absolute;top:0;left:0;‘></div> ##以外面的父级div框为标准,定位自己
</div>
opcity: 0.5 透明度
z-index: 层级顺序,大的在上面 ##点击,弹出一个框,背景变成灰色透明
...
HTML <font> 标签定义和用法<font> 规定文本的字体、字体尺寸、字体颜色。实例规定文本字体、大小和颜色:1<font size="3" color="red">This is some text!</font>2<font size="2" color="blue">This is some text!</font>3<font face="verdana" color="green">This is some text!</font>HTML 与 XHTML 之间的差异在 HTML 4.01 中,font 元素不被赞成使用。在 XHTML 1.0 Strict DTD 中,font 元素不被支持。原文:http://www.cnblo...
以下先记录一下JS控制CSS所使用的方法.
1.使用javascript更改某个css class的属性...
<style type="text/css">
.orig {
display: none;
}
</style>
你想要改变把他的display属性由none改为inline。
解决的方法: 在IE里:
document.styleSheets[0].rules[0].style.display = "inline";
在firefox里:
document.styleSheets[0].cssRules[0].style.display = "inline";
讨论: 能够做一个函数来搜索特定名字的style对象:...
页面往往是动态变化的,我们经常需要在脚本里对元素的样式进行操作,刚学习js的时候大家都知道通过style属性设置css样式相关的属性,但有时候也想先获取样式,结果发现通过style取到的值是空,这就需要我们对这些概念足够熟练。一、设置样式每个dom元素都具有一个style属性,与平常的属性不一样,style的值是一个CSSStyleDeclaration对象,这个对象的属性代表了该对应元素的内联样式。
注意上面说的是内联样式,我们知道,在<link...
原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了div盒子,并且覆盖了css原本的属性内容。需求目标:由 100 像素的粉色背景色的div盒子变成了 300像素的橘黄色效果的div盒子代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-e...
JavaScript获取DOM节点HTML元素CSS样式技术maybe yes 发表于2015-01-10 18:07原文链接 : http://blog.lmlphp.com/archives/59 来自 : LMLPHP后院如何使用 JavaScript 获取某个 DOM 节点下 HTML 元素的 CSS 样式值?使用过 JQuery 的童鞋一定都非常的熟悉,Jquery 提供了非常强大的 CSS 方法,可以很方便的设置和获取元素的 style 属性。某些情况下,我们不能使用 JQuery 时,就必须使用纯 JavaScript 获取元素的 style 属性值。本...
1、原理: 2、快速入门案例js中的事件主要分为4种:案例:监听鼠标点击事件,并能够显示鼠标点击的位置x,y<script language="javascript" type="text/javascript">function test1(e){window.alert(‘x=‘+e.clientX+‘y=‘+e.clientY);}function test2(e){window.alert(‘x=‘+e.clientX+‘y=‘+e.clientY);}function test3(){window.alert(new Date());}
</script>
<body onmousedown="test1(event)" onmousemove="test2(event)">...
1. 变量命名(1)变量名不应以短巧为荣左边的变量名都不太清楚,代码的扩展性不好,一旦代码需要加功能的话,就容易出现obj1、obj2、obj3这种很抽象的命名方式。所以一开始就要把变量的名字起得真实有意义,不要搞一些很短很通用的名字。(2)bool变量建议布尔变量不用以is/do之类的开头var isMobile = true,isError = true,doUpdate = false;可改成:var mobile = true,error = true,updated = false;还有其它一些常用的名称如don...
css样式避免页面大小不同导到样式被改变 页面最外层:像素的宽度 ===> 最外层设置绝对宽度 <body><div class="pg-header"></div><div style="width: 980px;">头部数据</div><div class="pg-body"><div style="width: 980px;">中间内容</div></div><div class="pg-footer"><div style="width: 980px;">底部菜单</div></div></body>
默认img标签有1px的边框(去掉边框的方法)1<style>2 img{3 border: 0;4...
嗯 就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式。设计: 观察一张图片的变化,发现: 1、图片缩放(随机,并且不是同时运动) 1、从大到小 2、从小到大,透明度从1到0(在第一步运动完成后立马开始) 2、图片旋转(随机,并且不是同时运动的。需要在全部运动走完以后开始) 3. 因为每张图片是随机开始变换的,所以起始时间是不同的,这里可设置一个延迟器setTimeout,时...
//动态加载js
function loadScript(url) {var script = document.createElement(‘script‘);script.type = ‘text/javascript‘;script.src = url;document.getElementsByTagName(‘head‘)[0].appendChild(script);
}//动态加载css
function loadStyles(url) {var link = document.createElement(‘link‘);link.rel = ‘stylesheet‘;link.type = ‘text/css‘;link.href = url;document.getElementsByTagName(‘head‘)[0].app...