zoukankan      html  css  js  c++  java
  • 五、JS操作HTML方法

    1.js事件
        例如最基本的,onbluer  获得焦点,onchenge  修改文本,onclick  鼠标点击事等等。
    这类代码写到标签中,<div onclick="函数名"></div>,这里注意的是函数名的双引号。

    2.dom的window操作
        window.open(url,name,spers,replace);注意此处的四个人属性值都加双引号用逗号隔开。
        url:打开的链接的地址。
            name:打开方式有四种,默认为_blank  打开新窗口
            _parent 打开到付及框架
            _sele 代替自身的页面
            _top 直接打开到顶级父级页面
        spers:多用于调整高度

         以下的window操作写法可以将window换成对应的对象名:
        window.close(); 关闭窗口
        window.moveto(x,y); 调整打开窗口的位置
        window.resize(x,y); 高宽    单位是像素

    3.延迟与间隔
        间隔 setInterval("函数名",间隔时间) 函数名需要添加双引号!!    时间是毫秒!
        setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由     

        setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
        clearInterval(间隔的变量名);
    间隔多用于没有用户操作的情况下

        延迟
        setTimeout("函数名",间隔时间)  双引号注意!!
         方法用于在指定的毫秒数后调用函数或计算表达式。 

    4.操作html
        查找元素:
            根据id获取元素
            document.getElementById("id");
            根据class获取元素
            document.getElementsByClassName("class");
            根据标签名获取元素
            document.getElementsByTagName("div");
            根据name获取元素
            document.getElementsByName("name");
            注意添加引号!!

    5.改变html内容    
        对象名.innerHTML;用于添加文本或者代码
        添加文本  .innertext;
        
    6.操作属性                 此处注意添加双引号!!
        1.设置一个属性,添加或更改
        获取的对象.setAttribute("属性名","属性值")
        2.获取属性的值
        获取的对象.getAttribute("属性名");
        3.移除一个属性
        获取的对象.removeAttribute("属性名");
    7.操作样式
        1.操作样式     
        获取的        对象.style.样式="" ;    样式中间的横杠去掉  且需要大写    例如
    backgroundColor   

    2.获取样式
        Var a = 获取的对象.style.样式
        
    8.操作表单元素 
        对象名.value;

  • 相关阅读:
    图论专题1考试Problem1
    React 创建对话框组件
    React中防止字符转义
    JSX添加注释
    redux和react-redux在react中的使用
    动手实现 React-redux(三) Provider
    动手实现 React-redux(二) mapDispatchToProps
    动手实现 React-redux(一) connect 和 mapStateToProps
    Redux架构模式
    React context(不使用props,父组件给子组件传递信息)
  • 原文地址:https://www.cnblogs.com/xu1115/p/10700389.html
Copyright © 2011-2022 走看看