你好javascript day11

1）标签属性

任何一个DOM元素，有两种属性，一个是对象属性，一个是标签属性

把写在标签上的属性称为标签属性

任何一个DOM元素都是对象模型，都可以自主的添加设置对象的属性和值

 

设置标签属性

元素.setAttribute(属性名,属性值);

属性名的命名不能使用驼峰式命名，通常命名时使用-区分两个单词:toggle-target

属性值不能出现大写，并且必须是字符串

设置标签属性以后，可以用于多种数据使用，可以用于获取标签元素等操作

 

className   class是一个特殊

 

获取标签属性值

元素.getAttribute(属性名)；

 

删除标签属性

元素.removeAttribute(属性名);

 

所有的标签单属性 值和属性名相同

 

通过下面都可以设置行内属性

div.setAttribute("style","width:50px;height:50px;background-color:red")；

 

当执行getComputedStyle(元素)  就会自动将元素与对应的css混合形成这个元素的渲染树对象

然后通过这个渲染树对象取出对应的属性

这个方法属于window的方法

 

IE任何版本都支持这种写法

console.log(div.currentStyle.width);

 

参数

type  要创建元素的类型 例如div，ul，img

style  object对象 样式对象

props  object对象  DOM对象属性

parent 父元素对象 需要将创建好的元素放在谁的里面

a超链接 href

图片  src

div   textContent

 

抽象方法

        function ce(type,style,props,parent){
            // 创建一个元素，这个元素的类型是type
            var elem=document.createElement(type);
            // 将给入的样式对象中每个属性复制到创建好元素的style对象上
            // 这样就相当于给创建好的元素增加样式
            for(var prop in style){
                elem.style[prop]=style[prop];
            }
            // props是DOM的对象属性
            // 我们认为elem就是DOM对象，会将props这个对象中的所有属性复制到DOM对象上
            for(var str in props){
                elem[str]=props[str];
            }
            // 如果给入了要放在谁的里面，将元素放在这个里面
            if(parent){
                parent.appendChild(elem);
            }
        //    将创建好的元素返回出去
            return elem;
        }

 

2）宽高

元素.clientWidth  客户宽高  

元素.clientHeight

元素.offsetWidth   偏移宽高

元素.offsetHeight

元素.scrollWidth   滚动宽高

元素.scrollHeight

 

        // 1、内容高度 console.log(document.body.clientHeight);

        // 2、可视宽高 console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)

        // 3、有滚动条时，内容宽高  console.log(document.body.scrollWidth,document.body.scrollHeight);

 

以上所有的宽高，基于元素被加入到DOM渲染树后

也就是被添加在页面中以后，才可以获取

并且图片这类后加载元素无法获取宽高  （异步原因造成）

异步 当运行某个需要一段时间完成的内容时，可以先继续向后执行代码，加载和执行后面是同时进行的

同步  上一步执行完成再执行下一步

 

getComputedStyle(div).width；样式值  50px

div.clientWidth  样式数值  50

 

3）位置

 

元素

            width,  //offsetWidth

            height, //offsetHeight

            left, //最左边到可视窗口的距离

            top, //最顶部到可视窗口的距离

            right,//left+width 最右边到可视窗口的距离

            bottom,//top+height  最下面到可视窗口的距离

            x, //left

            y  //top 

 元素的

        // 1、offsetLeft、offsetTop，定位后元素相对父容器的距离

        // 2、scrollLeft，scrollTop,元素内的滚动条位置

        // 3\ getBoundingClientRect()获取元素的矩形界限范围

html body

        // body 和 html没有边线，所有这两个值都是0

        // console.log(document.body.clientLeft,document.body.clientTop)

        // console.log(document.documentElement.clientLeft,document.documentElement.clientTop)

 

        // 因为body和html标签都是最顶端，最外层，这两个值都是0

        // console.log(document.body.offsetLeft,document.body.offsetTop)

        // console.log(document.documentElement.offsetLeft,document.documentElement.offsetTop)

 

元素.onscroll=function(){

当元素有滚动条事件触发

}；

 

网页标题文本滚动：

<script>
var s="";
var str="你好我的朋友，欢迎来学习H5.";
init();
funcition init(){
setInterval(enterFrame,1000);
};
funcition enterFrame(){
if(s.length===0) s=str;
document.title=s;
s=s.slice(1);
};
</script>

 

置顶：

<script>
var topBtn;
var bool=false;
init();
function init(){
topBtn=document.querySelector(".topBtn");
topBtn.onclick=clickHandler;
window.scroll=scrollHandler;
setInterval(enterFrame,1000);
};
function clickHandler(){
bool=true;
}
function scrollHandler(){
if(document.documentElement.scrollTop>document.documentElement.clientHeight){
topBtn.style.display="block";
}else{
topBtn.style.display="none";
}
}
function enterFrame(){
if (!bool) return;
document.documenrElement.scrollTop-=100;
if(document.documentElement.scrollTop===0){
bool=false;
}
}

</script>