`
accpxudajian
  • 浏览: 458650 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript和css兼容性小结

阅读更多

 

XHTML和HTML之间的区别
1.XHTML 元素一定要被正确的嵌套使用。
2 XHTML 文件一定要有正确的组织格式。
<html>
  <head> ... </head>
  <body> ... </body>
  </html> 
3 标签名字一定要用小写字母。
因为 XHTML文档是XML应用程序, XML 对大小写是敏感的
4 所有的 XHTML 元素一定要关闭,独立的一个标签我们也要结束用 />来结束。
5 XHTML的一些其他语法要求:  属性名字必须小写。如:
正确的代码:
  <dl compact="compact">
  <input checked="checked" />
  <input readonly="readonly" />
  <input disabled="disabled" />
  <option selected="selected" />
1.div的垂直居中问题 

     vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行  
1. getYear()方法
var year= new Date().getYear();
document.write(year);//ie = 2011" ff和chrome=111,因为在ff里面 getYear 返回的是 "当前年份-1900" 的值。

【兼容处理】通过 getFullYear getUTCFullYear 去调用: 
var year = new Date().getFullYear();document.write(year); //2011

动态设置表单元素的float属性的区别:

var test = document.getElementById("test");
test.style.float="right";//chrome
test.style.styleFloat="right";//IE
test.style.cssFloat = "right";//FF


word-break:break-all;//div内容超过div宽度,则把文字切碎换行。
word-wrap:break-word; //配合使用 表示吧单词切断了。
min-width: 80px;
min-height: 35px;
max-width:400px;
margin-left:auto;margin-right:auto; //非IE浏览器实现居中,IE需要加上text-algin:center;

overflow:auto;				//自动出现滚动条

cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code: <style type="text/css"> 

   a:link {color:blue;} a:hover {color:yellow;} a:active {color:red;}  a:visited {color:green;}


{margin:0;padding:0;}浏览器大都有自己的默认值,手动设置为0就能解决大部分问题

div{margin:30px!important;margin:28px;} 为了兼容FF,可以为FF提供自己的样式,使用!important,注意这两个 margin的顺序一定不能写反, important这个属性IE不能识别,

Object.style.background=
	background-color:color/blue,#FFFFF;
	background-image:url(images/a.jif);
background-repeat:’no-repeat/repeat-x/repeat-y/repeat; 
background-attachment: scroll/fixed;
background-position: (top,left)/(23px,34px)/(12%,30%)

width:auto !important;width:100px;height:auto;max-width:400px;
非IE浏览器支持width=auto,但是IE不识别,所以使用import,同时max-width样式IE也不识别。

滤镜:
IE:filter:alpha(opacity=30,style=1)"> 
opacity=30 表示滤镜为30%,style有效值为 1 2 3 4
	IE复杂데滤镜效果:
<div style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='0');
widht:100px; height:100px;"></div>

FF:	opacity: .1 表示滤镜为10%(也可以写0.1)

事件兼容写法:var e = e||window.event;
Event.x的兼容性写法:var x = event.clinetX; 	IE and FF 等 都有
但是clientX和event.x有细微데差别,
更标的写法:Var x = event.x?event.x:event.pageX;


事件源兼容写法:(取得事件触发的dom的tagName)
var event = e ||window.event;
	var srcDom = event.srcElement || event.target
	alert(srcDom.tagName)

window.open()的参数and说明
channelmode=yes|no|1|0	是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0	是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0	是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels	窗口文档显示区的高度。以像素计。
left=pixels	窗口的 x 坐标。以像素计。
location=yes|no|1|0	是否显示地址字段。默认是 yes。
menubar=yes|no|1|0	是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0	窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0	是否显示滚动条。默认是 yes。
status=yes|no|1|0	是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0	是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0	是否显示浏览器的工具栏。默认是 yes。
top=pixels	窗口的 y 坐标。
width=pixels	窗口的文档显示区的宽度。以像素计。

注意:参数之间使用,号分隔,这个区别于样式的写法 demo:
window.open("a.htm","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")

FF圆角: -moz-border-radius:4px,

Date对象的getDate()的兼容性写法:var y  =now.getFullYear();
	FF 和chrome里面 getYear 返回的是 "当前年份-1900" 的值。

给DOM对象设置属性一律使用setAttribute方法。

设置DOM对象的样式
IE和FF都支持object.className,所以可以这样写:
var myObject = document.getElementById("header");
myObject.className="classValue"



获取键盘值的兼容性写法:
<input id="txt"  onkeydown="dotest(event)">
function dotest(e){
	var event = e||window.event;
	var code = e.which || e.keyCode;
	alert(code)
}
注意:在调用dotest方法的时候需要传递event参数,而且,参数的名称必须是event
例如:<input id="txt"  onkeydown="dotest(event)"> 
如果<input id="txt"  onkeydown="dotest(e)"> 则失效
备用:同时按住alt ctrl shift等
altKey,ctrlKey,shiftKey:顾名思义,这些属性是指鼠标事件发生的时候,是否同时按住了Alt、Ctrl或者Shift键,返回的是一个布尔值。



事件绑定的兼容性写法:
var divDom = document.getElementById("box");
		//divDom.onclick = function(){alert('aaaaaaaa')}
// 这种写法虽然兼容,但是新的onclick方法覆盖了原始的onclick方法。
	if(divDom.attachEvent){
		divDom.attachEvent("onclick",function(){
//这种写法仅IE兼容 注意:IE事件方法加上on
			alert("IE")
		})
	}else{
		divDom.addEventListener("click",function(){
//FF chrome等等兼容,注意:FF等等事件不加on
			alert("FF")
		},false)  	//这个参数必须加,但是什么作用还不清楚???
	}
对应的移除事件监听分别为:detachEvent 和removeEventListener
测试了,但是没有成功的移除事件监听????????


childNodes在IE和FF下的区别:

<ul id="main"> <li>1</li> <li>2</li> <li>3</li></ul> <input type=button value="click me!" 
onclick="alert(document.getElementById('main').childNodes.length)">

IE下返回3,但是FF和Chrome返回6,(网友说使用#text判断)

清空一个select的options的兼容性写法:
sel.options.length = 0; //将options的长度置为0就可以了。

标准户:给每个图片加上alt属性,alt:当照片不存在或者load错误时的提示。
其中FF做得最好,如果图片不存在完全用alt的文本填充,IE下还有一块破碎的图片显示,但是也有文本题是,而chrome则什么文字都没有;

FF图片缓存问题:
有的网友说,FF下有图片缓存的问题,要想动态设置图片的src,最好使用随机数的方法:
<img onclick= "this.src='a.gif?'+Math.random()" src="b.gif" alt="图片缺失"/>
经测试,FF下并么有发现有图片缓存问题(可能是没有触发),按照上边加?号的写法图片也正常显示,先记录下来吧,或许将来用得到。

获得事件的前一个事件对象和后一个事件对象:(获取tagName为例)
Html代码:
<input id="txt" 
onmouseover="goin(event)"  onmouseout="goout(event)">
<span>aaaaaaaaaaaaaaaaa</span>

JS代码:
function goin(e){
	var event = e||window.event;
	var src = event.target || event.srcElement;
	if(event.fromElement){
		alert("IE from "+event.fromElement.tagName);
	}else{
		alert("FF from "+event.relatedTarget.tagName);
	}
}

function goout(e){
	var event = e||window.event;
	var src = event.target || event.srcElement;
	if(event.fromElement){
		alert("IE TO "+event.toElement.tagName);
	}else{
		alert("FF to "+event.relatedTarget.tagName);
	}
}


(一)IE Event对象的主要属性和方法
  在IE中有一个专门负责事件处理的对象Event,这个对象负责对事件的处理,含有很多的属性和方法,通过这些方法和属性的调用,就能完成很多的事件处理。
  type:事件的类型,就是HTML标签属性中,没有“on”前缀之后的字符串,例如“Click”就代表单击事件。
  srcElement:事件源,就是发生事件的元素。
  button:声明了被按下的鼠标键,是一个整数。1代表鼠标左键,2代表鼠标右键,4代表鼠标的中间键,如果按下了多个鼠标键,就把这些值加在一起,所以3就代表左右键同时按下。
  clientX/clientY:是指事件发生的时候,鼠标的横、纵坐标,返回的是整数,它们的值是相对于包容窗口的左上角生成的。
  offsetX/offsetY:鼠标指针相对于源元素的位置,可以确定单击Image对象的哪个象素。
  altKey,ctrlKey,shiftKey:顾名思义,这些属性是指鼠标事件发生的时候,是否同时按住了Alt、Ctrl或者Shift键,返回的是一个布尔值。
  keyCode:返回keydown和keyup事件发生的时候,按键的代码以及keypress事件的Unicode字符。
  fromElement、toElement前者是指代mouseover事件移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素。
  cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素。
  returnValue:一个布尔值属性,设置为false的时候可以组织浏览器执行默认的事件动作,相当于<a href=”#” onclick=”ProcessMethod();return false;” />。
  attachEvent()和detachEvent()方法:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素。

差别:12. body 对象
 火狐的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在

脚本延迟:
在<script>元素中设置defer属性(如下面的例子所示),实际上与上一节中介绍的把<script>元素放在页面最底部的效果是一样的。

	<script type="text/javascript" defer="defer" src="example1.js"></script> 

Noscript的使用:
浏览器都会显示<noscript>中的内容。而在除此之外的其他情况下,浏览器不会呈现<noscript>中的内容。
 <body> 
    <noscript> 
      <p>本页面需要浏览器支持(启用)JavaScript。  
    </noscript> 
  </body> 





第二季:

 2.IE中事件的起泡:IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如,<div>标签包含了<a>,如果这两个标签都有onclick事件的处理函数,那么执行的情况就是先执行<a>标签的onclick事件处理函数,再执行<div>的事件处理函数。如果希望<a>的事件处理函数执行完毕之后,不希望执行上层的<div>的onclick的事件处理函数了,那么就把cancelBubble设置为false即可

<div onclick="alert('div')">
<a href="#" onclick="alert('A');event.cancelBubble=true;">abc</a>
</div>

以上代码只会弹出A,不会弹出div,因为

3.二级DOM标准中的Event
  和IE不同的是,W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。通常在DOM二级标准中,event作为发生事件的文档对象的属性。Event含有两个子接口,分别是UIEvent和MutationEvent,这两个子接口实现了Event的所有方法和属性,而MouseEvent接口又是UIEvent的子接口,所以实现了UIEvent和Event的所有方法和属性。下面,我们就看看Event、UIEvent和MouseEvent的主要属性和方法。
  1.Event
    type:事件类型,和IE类似,但是没有“on”前缀,例如单击事件只是“click”。
    target:发生事件的节点。
    currentTarget:发生当前正在处理的事件的节点,可能是Target属性所指向的节点,也可能由于捕捉或者起泡,指向Target所指节点的父节点。
    eventPhase:指定了事件传播的阶段。是一个数字。
    timeStamp:事件发生的时间。
    bubbles:指明该事件是否起泡。
    cancelable:指明该事件是否可以用preventDefault()方法来取消默认的动作。
    preventDefault()方法:取消事件的默认动作;
    stopPropagation()方法:停止事件传播。
  2.UIEvent
    view:发生事件的window对象。
    detail:提供事件的额外信息,对于单击事件、mousedown和mouseup事件都代表的是点击次数。
  3.MouseEvent
   button:一个数字,指明在mousedown、mouseup和单击事件中,鼠标键的状态,和IE中的button属性类似,但是数字代表的意义不一样,0代表左键,1代表中间键,2代表右键。
   altKey、ctrlKey、shiftKey、metaKey:和IE相同,但是IE没有最后一个。
   clientX、clientY:和IE的含义相同,但是在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上document.body.scrollLeft和document.body.scrollTop。
   screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要。
   relatedTarget:和IE中的fromElement、toElement类似,除了对于mouseover和mouseout有意义外,其他的事件没什么意义。
(三)兼容于两种主流浏览器的拖动DOM元素的例子
  好了,刚才讲了这么多DOM编程和IE中的事件,那么如何编写兼容IE和Mozilla Firefox两种主流浏览器的拖拽程序呢?代码如下:
function beginDrag(elementToDrag,event)
{
  var deltaX=event.clientX-parseInt(elementToDrag.style.left);
  var deltaY=event.clientY-parseInt(elementToDrag.style.top);
  
if(document.addEventListener) 
{
  document.addEventListener("mousemove",moveHandler,true);
  document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent)
{
  document.attachEvent("onmousemove",moveHandler);
  document.attachEvent("onmouseup",upHandler);
  
}
  
  if(event.stopPropagation)   event.stopPropagation();
  else event.cancelBubble=true;
  if(event.preventDefault)  event.preventDefault();
  else event.returnValue=false;
  
  function moveHandler(e)  
  {
  if (!e) e=window.event; //如果是IE的事件对象,那么就用window.event
  //全局属性,否则就用DOM二级标准的Event对象。
    elementToDrag.style.left=(event.clientX-deltaX)+"px";
    elementToDrag.style.top=(event.clientY-deltaY)+"px";
    
     if(event.stopPropagation)   event.stopPropagation();
    else event.cancelBubble=true;
    
  }
  
  function upHandler(e)
  {
       if(document.removeEventListener)
    {
      document.removeEventListener("mouseup",upHandler,true);
      document.removeEventListener("mousemove",moveHandler,true);}
      else
    {
      document.detachEvent("onmouseup",upHandler);
      document.detachEvent("onmousemove",moveHandler);}
    }
      if(event.stopPropagation)   event.stopPropagation();
    else event.cancelBubble=true;
    
  }



学习3

获得浏览器的可用高度和宽度的兼容性写法:
	var WHGeter={
		getWidth : function(){
			return document.body.clientWidth;

		},
		getHeight : function(){
			return document.body.clientHeight;
		}
	};

var srcDom = e.target || e.srcElement;
alert(srcDom.tagName)

父级节点的兼容性写法:
Var paent = aDom.parentNode; //parentElement火狐不支持,chrome支持

事件委托的兼容性写法:例如
Document.body.onload = function(){doLoad();} (最好写这个)
或者:Document.body.onload = doLoad();(也可以实现)
但是不赞成:Document.body.onload = doLoad;因为FF和Chrome不支持

禁止用户选中文本的兼容性方法:FF使用css样式,IE使用JS
<div style="-moz-user-select:none;"
 onselectstart="return false;">aaaaaaaaaaaaaaaaaaaaa</div>


FF下实现圆角效果:-moz-border-radius:4px;border:1px solid red;
取消body的滚动条的兼容性写法(使用样式)style="overflow:hidden;"
只有IE认识scroll="no",FF和Chrome都不认识。

创建文本节点并插入
var dom = getDom("mydiv");
		var node =  document.createTextNode("Hello world");
		dom.insertBefore(node,getDom("mytxt"));//将文本插入在容器中指定元素(mytxt)的前边
		//dom.appendChild(node);//将文本插入容器的最后边。replaceChild

JS读取CSS样式主义的问题:
只有写在DOM元素的style中的属性才是可读的,通过css控制的样式JS并不能读出来。
div{color:red;	}<div style=" height:100px;"></div>
其中,JS可读取的是height,var h = div.style.height;// h = 100
但是color读不到。Var color = div.style.color;// color = “”(空)

DOM元素的克隆cloneNode():
var dom = getDom("mytxt");
		var newDom= dom.cloneNode();
		getDom("mydiv").appendChild(newDom);
克隆的dom元素和原始的对象一摸一样,但是不是一个引用,而是一个新的引用。所以,var newDom = dom 和 var newDom = dom.cloneNode()完全不同,因为后者的指针已经变了。克隆后,id一样,不要忘记用 setAttribute(“id” , “ another_id “);改变新的节点的ID。
JS移除DOM元素:removeChild
var dom = getDom("mytxt");
dom.parentNode.removeChild(dom); 使用父节点parentNode进行删除

第四季:
判断一个DOM元素是否有子元素:
<div style="border:1px solid red;height:3000px;" id="mydiv">
	aaaa<br/>
	<div>
		<input/>
		<img>
	</div>
	<input/>
</div>

var dom = getDom("mydiv");
dom.hasChildNodes(); 或者dom.childNodes.length

获取某一个DIV中的node的兼容性写法:

var dom = getDom("mydiv");
		var arr = dom.childNodes;
		var counter = 0;
		for(var i=0;i<arr.length;i++){
			if("#text"!==arr[i].nodeName){
				counter ++;
				JSLogger.log(arr[i].nodeName)
			}
		}
	JSLogger.log("counter = "+counter)
重要:DOM的直接包含的元素包括文字和标签和换行,而,文本,结尾标签和换行的nodeName都等于#text,所以要通过nodeName判断一下。


打印一个元素后边平级的所有有效的节点:(不算包含데)
var dom = getDom("mydiv2");
		var next = dom.nextSibling; // previousSibling 上一个平级节点
		while(next){
			if("#text"!==next.nodeName){
//打印容器的nodeName
				JSLogger.log(next. parentNode.nodeName)	;
			}
			next = next.nextSibling;
		}

网页输入HTML代码的最简单的写法:

var dom = getDom("mydiv").cloneNode(true);//true表示克隆内容
var html = dom.innerHTML.replace(/</g,"&lt;").replace(/>/g,"&gt;");//正则
JSLogger.log(dom);
 

去掉A标签点击后的虚线
<a href="#" hidefocus="true">点击后么有虚线</a>
<a href="#">点击后有虚线</a>

通过cloneNode方法添加新的Tr
<table>
	<tbody id="mytbody">
		<tr>
			<td>111</td>
			<td><input type="button"value="add" onclick="add(this)"></td>
		</tr>
	</tbody>
</table>
<script>
	function add(tdObj){
		var tbody = document.getElementById("mytbody");
		//JSLogger.log(tdObj.parentElement.parentElement);//仅IE支持
//全兼容写法
		var newTr = tdObj.parentNode.parentNode.cloneNode(true);
		tdObj.parentNode.innerHTML="";
		mytbody.appendChild(newTr);
	
	}
</script


“===”(“!==”)在JavaScript 中称为恒等(非恒等)运算符,在该运算符下进行比较运算是不会自动进行类型转换,并且只有类型和值都相等的情况下才视为相等。
下面讲讲如何将其他类型转换成boolean 类型:(两次非)

 


逻辑与逻辑或,和 短路与短路或

function iftrue(){
		JSLogger.log("iftrue")
		return true;
	}
	function iffalse(){
		JSLogger.log("iffalse");
		return false;
	}
	
	if(iftrue() && iffalse()){
		JSLogger.log("true");//iftrue,iffasle
	}
	if(iffalse() && iftrue()){
		JSLogger.log("true");//iffasle
	}

	if(iffalse() || iftrue()){
		JSLogger.log("true");//iffasle iftrue true
	}
	if(iftrue() || iffalse()){
		JSLogger.log("true");//iftrue true
	}
	//总结:&&短路与,只要出现false,就不继续往下走了
	//		||短路或,只要出现true,就不继续往下走了
	// | and &  前后条件都会进行。

Callee和caller的使用

function fool1(v1,v2){
		JSLogger.log("fool1");
		fool2(v1);
	}
	function fool2(v1){
		JSLogger.log("fool2");
		fool3();
	}

	function fool3(){
		var foo = arguments.callee;
		while(foo && (foo!=window)){//避免死循环的关键
			JSLogger.log("调用参数:");
			var args = foo.arguments;
			for(var i=0;i<args.length;i++){
				JSLogger.log("args["+i+"] = "+args[i]);
			}
			foo = foo.caller;
		}

	}
	fool1(1,2,3,4);
输出结果:
fool1
fool2
调用参数:
调用参数:
args[0] = 1
调用参数:
args[0] = 1
args[1] = 2
args[2] = 3	
args[3] = 4


简化:
function fool1(){
		JSLogger.log("fool1 ");
		JSLogger.log(arguments[0]);
		fool2();
	}
	function fool2(){
		JSLogger.log("fool2 ");
		var	caller = arguments.callee.caller;
		JSLogger.log(caller.arguments[0]);
	}

	fool1("Tom");
输出结果:
fool1 
Tom
fool2 
Tom

Call 和 apply的使用

function User(name){
		this.Name = name;
	}

	function test(){
		if(this==window){
			JSLogger.log("window 调用");
		}else{
			JSLogger.log("this.Name = "+this.Name);
		}
	}
	test();//window 调用
	var u1 = new User("Tom");
	var u2 = new User("Jack");
	
	test.call(u1);// this.Name = Tom
	test.apply(u2);// this.Name = Jack



<script language="javascript" defer="defer">
	alert("up");//defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。
	//虽然up在上边,但是设置了defer,所以会向下解析,等到文档全部解析结束之后再回回来再执行alert("up")
	//所以,运行结果是先弹出 down,然后弹出up
</script>
<script type="text/javascript">
//兼容XHTML的写法
//<![CDATA[  
	alert("down")
//]]>
//保证让相同代码在XHTML中正常运行的第二个方法,就是用一个CData 片段来包含JavaScript代码。在XHTML(XML)中,CData 片段是文档中的一个特殊区域,这个区域中可以包含不需要解析的任意格式的文本内容。因此,在CData 片段中就可以使用任意字符--小于号当然也没有问题,而且不会导致语法错误。
//在兼容XHTML的浏览器中,这个方法可以解决问题。但实际上,还有不少浏览器不兼容XHTML,因而不支持CData 片段。怎么办呢?再使用JavaScript注释将CData标记注释掉就可以了:
</script>
	var temp =[]
	function test(){
		var arr = ["a","b","c"]
		for(var i=0;i<arr.length;i++){
			var o={};
			var v = arr[i];
			o.say =  function(str){
				return function(){
					JSLogger.log(str)
				}
			}(v);

			temp.push(o);
		}
	}
	
	test();
	temp[0].say();

	var v ="BBB";//全局变量

	(function (v){
		v ="AAAA";//毕包中重新赋值
		alert(v);//AAAA
	})(v);
	alert(v);//BBBB 毕包中的操作不会影响包外
分享到:
评论

相关推荐

    项目中碰到的css兼容问题小结

    在开发Web应用时,CSS兼容性问题常常是开发者面临的一大挑战。...通过理解这些常见的CSS兼容性问题及其解决方案,开发者能够创建更具兼容性的Web应用,确保在广泛的用户群体和浏览器环境中都能获得良好的显示效果。

    多浏览器css兼容分析小结

    ### 多浏览器CSS兼容分析小结 ...综上所述,多浏览器CSS兼容性的处理涉及到了许多细节,需要前端开发者具备丰富的经验和技巧。了解并掌握这些知识点有助于开发者在面对复杂的跨浏览器兼容性问题时更加从容不迫。

    JavaScript+DOM编程艺术

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 (由于文件大小的关系,分成三部分上传,请注意下载) ... 5.5 向后兼容性  5.6 小结

    JavaScript+DOM编程艺术(二)

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 第1章 JavaScript简史  1.1 JavaScript的起源 ... 5.5 向后兼容性  5.6 小结

    JavaScript+DOM编程艺术(一)

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 第1章 JavaScript简史  1.1 JavaScript的起源 ... 5.5 向后兼容性  5.6 小结

    JavaScript 权威指南(第四版).pdf

     5.8 JavaScript语句小结116  第6章 对象118  6.1 创建对象120  6.2 属性的查询和设置123  6.3 删除属性127  6.4 检测属性128  6.5 枚举属性130  6.6 属性getter和setter132  6.7 属性的特性134  6.8 对象...

    javascript中使用css需要注意的地方小结

    由于不同浏览器对DOM标准的支持程度不一致,通过定义一个跨浏览器函数来处理兼容性问题是非常有必要的。例如,可以根据浏览器是否支持`getComputedStyle`方法来决定使用哪种方式获取元素的样式。上述代码片段中的`...

    HTML5开发大全CSS+JAVASCRIPT+WEBGL

    #### 六、小结 - 本书全面覆盖了使用HTML5、CSS3和WebGL开发游戏所需的技术细节,不仅提供了理论知识,还包含了丰富的实践案例。 - 无论是初学者还是有一定经验的开发者,都能从中学到有用的信息和技术。 - 随着...

    JavaScript基本编码模式小结

    - 特性检测而非浏览器检测,例如`if(document.getElementById){}`,这样能确保代码具有更好的跨浏览器兼容性。 6. **三元操作符**: - 三元操作符`condition ? value1 : value2`可以简化简单的条件语句,但复杂的...

    JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结

    本文主要针对JavaScript在IE和Firefox两种浏览器下的兼容性问题进行了分析,并总结了七个关键差异的兼容写法。 1. CSS “float”值的访问差异 在JavaScript中,我们可以使用“object.style.property”句法来访问和...

    JAVASCRIPT IE 与 FF中兼容问题小结

    JavaScript在IE和Firefox中存在兼容性问题,这些差异主要表现在...综上所述,IE和Firefox浏览器在JavaScript以及CSS的属性和方法上存在不少差异,需要开发者在编写代码时细心处理,以确保网页在不同浏览器中的兼容性。

    IE和Firefox下javascript的兼容写法小结

    JavaScript是Web开发中不可或缺的一部分,但在不同的浏览器之间,它的实现可能会有所不同。...在实际开发中,可能还需要处理更多细节,如CSS样式、DOM操作等方面的差异,确保全面的跨浏览器兼容性。

    常见的浏览器兼容性问题(小结)

    浏览器的兼容性无非还是样式兼容性(css),交互兼容性(javascript),浏览器 hack 三个方面。 样式兼容性(css)方面 (1) 因为历史原因,不同的浏览器样式存在差异,可以通过 Normalize.css 抹平差异,也可以...

    JavaScript权威指南(第6版)

    5.8 JavaScript语句小结 第6章 对象 6.1 创建对象 6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章 ...

    JavaScript权威指南(第6版)(附源码)

    5.8 JavaScript语句小结 第6章 对象 6.1 创建对象 6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章...

    网站开发技巧-个人三年遇到的一些CSS经典问题及解决方法

    1. **浏览器兼容性问题**:不同浏览器对CSS的支持程度各不相同,导致在Firefox、Chrome、Safari、Edge和Internet Explorer(尤其是IE6、IE7和IE8)之间存在兼容性问题。最全的CSS浏览器兼容问题.doc文档中详细列出了...

    JavaScript权威指南(第6版)(中文版)

    5.8 JavaScript语句小结 第6章 对象 6.1 创建对象 6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章 ...

Global site tag (gtag.js) - Google Analytics