【javascript】以下是js对html元素的的一些操作-很有用


网页可见区域宽: document.body.clientWidth;

网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width – border

clientHeight = height – border

offsetWidth = width

offsetHeight = height

 

HTML控件offsetTop、scrollTop等属性

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

原文来自于: http://blog.sina.com.cn/s/blog_63426ff90100m8c3.html]JS:offsetWidthoffsetleft 等图文解释

【js】列表滚动原理

<div id=”Main” style=”border:2px solid #D8CDAB;overflow:hidden;height:494;width:174;background:#ffffff;”>

<div id=”List01″>
<ul>
<li>
</li>
</ul>
</div>
<div id=”List02″> </div>
</div>

<script>

var speed = 20;

var Main = document.getElementById(“Main”);
var List01 = document.getElementById(“List01”);
var List02 = document.getElementById(“List02”);

List02.innerHTML = List01.innerHTML;

function AddMove(){
if(List02.offsetTop – Main.scrollTop <=0){
Main.scrollTop -= List01.offsetHeight;
} else {
Main.scrollTop++;
}
}

var MyMove=setInterval(AddMove,speed);
Main.onmouseover=function() {clearInterval(MyMove); }
Main.onmouseout=function() {MyMove=setInterval(AddMove,speed);}

</script>

效果图:

【html】如何屏蔽iframe中的超链接

在网页上嵌入新浪的视频新闻:

<iframe style=”margin-top:-200px;margin-left:-210px;” src=”http://golf.sina.com.cn/golf_video/” width=”960px;” height=”690px;” frameborder=”0″ scrolling=”No”></iframe>

但是嵌入的窗口中有些链接直接跳转到了新浪网上去了,如何屏蔽呢?

采用过滤技术来解决这个问题:

<div style=”border:1px solid #999999;text-align:center;line-height:110px;width:485px;height:110px; position:absolute;background:#D8CDAB; filter:alpha(opacity=0);top:387;left:8;”>
<div>
<marquee>欢迎来到华人高尔夫视频点播!</marquee>
</div>
</div>
<div style=”line-height:31px;font-size:14px;width:84px;height:31px; position:absolute;background:#D8CDAB; filter:alpha(opacity=0);top:0;left:525;”>
华高视频点播
</div>

效果图:

【discuz 7.2】如何制作单页面或者专题?

制作单页面或者主题,我们需要两个文件,第一个是php文件来调用,第二个是模版文件(.htm)。

首先:对于php文件而言(电台功能实例来说明) diantai.php

 

<?php

require_once ‘./include/common.inc.php’;
if(!$discuz_uid) {
showmessage(‘not_loggedin’, NULL, ‘HALTED’);
}
include template(‘diantai’);

?>

说明:[code]require_once ‘./include/common.inc.php’;[/code]是包含Discuz!系统方法、变量等等

 

if(!$discuz_uid) {
showmessage(‘not_loggedin’, NULL, ‘HALTED’);
}

是游客(没有登录)不能实现此功能。

include template(‘diantai’);

是调用模版文件,没有后缀名。
然后: 模版文件(diantai.htm) 这里请用.htm后缀名

{subtemplate header}
<div id=”nav”><a href=”$indexname”>$bbname</a> &raquo; 聆听电台</div>
<div id=”wrap” class=”wrap”>
<div class=”main”>
<div class=”content”>

<div style=”width:799px;margin:0 auto;”>
<iframe width=”799″ height=”512″ frameborder=”0″ scrolling=”No” src=”http://player.kuwo.cn/MUSIC/”></iframe>
</div>

说明:

{subtemplate header}
{subtemplate footer}

分别是头部和尾部

<div id=”nav”><a href=”$indexname”>$bbname</a> &raquo; 聆听电台</div>

<div id=”wrap” class=”wrap”>
<div class=”main”>
<div class=”content”>
加自己的内容…
</div>
</div>
</div>

效果图: