js获取元素的方法与属性

js获取元素的方法

 

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量

  <scripttype="text/javascript">
   
var oDiv =document.getElementById('div1');

    alert(oDiv) 弹出对话框

  </script>

  <div id="div1">这是一个div元素</div>

但是注意:如果把上面一段代码放到 <head></head>中就会报错

 

解决方法:电脑加载

  <scripttype="text/javascript">
  
 1.window.onload = function(){
      
 2.var oDiv = document.getElementById('div1');
    }

  </script>

 

<div id="div1">这是一个div元素</div>

 

js操作元素的属性

获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。

 

操作属性的方法

  • 1、“.” 操作
  • 2、“[ ]”操作

 

属性写法

  • 1、html的属性和js里面属性写法一样
  • 2、“class” 属性写成 “className”
  • 3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”

 

通过点(.)获取属性

<scripttype="text/javascript">

1.加载:window.onload =function(){
      
 2.获取:var oInput = document.getElementById('input1');
      
 2.获取:var oA = document.getElementById('link1');
     
  3.// 读取属性值
       
var sValue =oInput.value;
        var sType =oInput.type;
        var sName =oInput.name;
        var sLinks = oA.href;

       
4.// (设置)属性
      
 oA.style.color = 'red';
        oA.style.fontSize = sValue;

    }

</script>

<inputtype="text" name="setsize" id="input1"value="20px">
<a href="" id="link1">
百度</a>

 

通过[ ]获取

<scripttype="text/javascript">

1.加载:window.οnlοad= function(){
     
  2.获取:var oInput1 =document.getElementById('input1');
     
  2.获取var oInput2 =document.getElementById('input2');
      
 2.获取var oA =document.getElementById('link1');
      
 3.// 读取属性
      
 var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;

       
4.// (设置)属性
        // oA.style.val1 = val2;
没反应
     
  oA.style[sVal1] = sVal2;       
    }

</script>

<inputtype="text" name="setattr" id="input1"value="fontSize">
<input type="text" name="setnum" id="input2"value="30px">
<a href="" id="link1">
百度</a>

通过获取的标签的innerHtml属性读写标签包裹的内容

  • 读取 oDiv.innerHtml
  • 写入 oDiv.innerHTML = "新内容"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/473986.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

adb logcat 基本用法

入门android &#xff0c;至少需要了解 adb 吧&#xff0c;那么打 log 也是必不可少的了。 下面简单介绍一下 adb logcat 基本用法&#xff1a; Usage: logcat [options] [filterspecs]options include: -s Set default filter to silent. Like…

ubuntu server安装hadoop和spark,并设置集群

安装server请看本人的上一篇博客 Ubuntu Server 20.04.2 安装 先前准备工作 创建 hadoop用户 创建用户之后&#xff0c;输入一下指令重启 shutdown -r now登录 hadoop 用户 安装 ssh 和 vim 首先更新一下 apt 工具 sudo apt-get update然后安装vim sudo apt-get install…

LeetCode 第 35 场双周赛(216/2839,前7.61%)

文章目录1. 比赛结果2. 题目1. LeetCode 5503. 所有奇数长度子数组的和 easy2. LeetCode 5505. 所有排列中的最大和 medium3. LeetCode 5504. 使数组和能被 P 整除 medium4. LeetCode 5506. 奇怪的打印机 II hard1. 比赛结果 做出来3题。继续加油&#xff01; 全国排名&#…

Linux Ubuntu 安装 anaconda3和 Pycharm 社区版本

恰巧大数据实验安装 Anaconda & Pycharm&#xff0c;借此机会写篇博客分享一下 Anaconda 下载 Anaconda 清华镜像网站看一看 下载之后&#xff0c;放入 linux文件夹中 安装 Anaconda bash 下载的文件名 之后&#xff0c;按照提示进行输入信息(大多数都是 回车) 一定…

LeetCode 第 207 场周赛(245/4115,前5.95%)

文章目录1. 比赛结果2. 题目1. LeetCode 5519. 重新排列单词间的空格 easy2. LeetCode 5520. 拆分字符串使唯一子字符串的数目最大 medium3. LeetCode 5521. 矩阵的最大非负积 medium4. LeetCode 5522. 连通两组点的最小成本 hard1. 比赛结果 做出来3题&#xff0c;第四题试了…

《软件工程》individual project开发小记(一)

今天周四没有想去上的课&#xff0c;早八点到中午11点半&#xff0c;下午吃完饭后稍微完善了一下&#xff0c;目前代码可以在dev c和vs2012上正常运行,性能分析我看资料上一大坨,考虑到目前状态不太好,脑袋转不动了,决定先放一放去看看邹老师以前的软工博客以及学长学姐们的经验…

JavaScript中九九乘法表制作

练习一下表格&#xff0c;利用Javascript制作出来&#xff1a; 代码赏析&#xff1a; <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-s…

机器学习算法--协同过滤算法

0. 关键词 推荐算法长尾理论UserCFItemCF 1. 推荐算法 互联网的飞速发展使我们进入了信息过载的时代&#xff0c;搜索引擎可以帮助我们查找内容&#xff0c;但只能解决明确的需求。为了让用户从海量信息中高效地获得自己所需的信息&#xff0c;推荐系统应运而生。 推荐系统…

ubuntu下安装chrome浏览器和flash插件

chrome浏览器可在Ubuntu软件中心里搜索并安装 falsh插件首先去官网下载合适的包然后&#xff0c;按照readme安装&#xff0c;执行sudo cp -r usr/* /usr 和sudo cp libflashlayer.so <BrowserPluginsLocation> 注意默认chrome插件目录为/usr/lib/chromium-browser/plugin…

利用JavaScript制作星星金字塔

主要练习&#xff1a; 代码赏析&#xff1a; <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&q…

机器学习算法--ALS

本文转载自&#xff1a;endymecy|ALS 一、什么是ALS ALS是交替最小二乘&#xff08;alternating least squares&#xff09;的简称。在机器学习中&#xff0c;ALS特指使用交替最小二乘求解的一个协同推荐算法。它通过观察到的所有用户给商品的打分&#xff0c;来推断每个用户…

04.卷积神经网络 W2.深度卷积网络:实例探究(作业:Keras教程+ResNets残差网络)

文章目录作业1&#xff1a;Keras教程1. 快乐的房子2. 用Keras建模3. 用你的图片测试4. 一些有用的Keras函数作业2&#xff1a;残差网络 Residual Networks1. 深层神经网络的问题2. 建立残差网络2.1 identity恒等模块2.2 卷积模块3. 建立你的第一个残差网络&#xff08;50层&…

为文本框加注释

var gzj $get("keyWords"); //得到dom对象 gzj.parentNode.appendChild(document.createTextNode("注&#xff1a;关键字以逗号隔开")); //给dom对象加后续东西 //手动添加检定周期单位&#xff1a;月function addInspectCycleUnit(){ var cycle…

JS字符串与定时器

js字符串方法 1.字符串的拼接通过 号 var sTr1 "abc"; varsTr2 "123"; var sTr3 sTr1 sTr2 2.字符串的类型转换 str.split("") var sTr 12; parseInt(sTr) parseFloat() 3.字符串分割成数组 var sDate "2017-3-12"; // …

反汇编

ILT Incremental Link Table 这个ILT其实就是一个静态的表&#xff0c;它记录了一些函数的入口然后跳过去&#xff0c;每个跳转jmp占一个字节&#xff0c;然后就是一个四字节的内存地址&#xff0c;所以加起为五个字节&#xff0c;这样就实现了类的机制。 6605*132 代表是调用的…

安装Python第三方库的常用方法和注意事项

安装Python的库 这里&#xff0c;我来介绍一下平时我们安装python库的几种常用方法和一些注意事项。 第一种&#xff0c;使用我们的pip工具 第二种&#xff0c;使用IDE中集成的功能进行一键安装(以Pycharm 为例) 第三种&#xff0c;使用Anaconda进行安装 使用 pip 工具安装第三…

LeetCode 968. 监控二叉树(DFS)

文章目录1. 题目2. 解题1. 题目 给定一个二叉树&#xff0c;我们在树的节点上安装摄像头。 节点上的每个摄影头都可以监视其父对象、自身及其直接子对象。 计算监控树的所有节点所需的最小摄像头数量。 示例 1&#xff1a; 输入&#xff1a;[0,0,null,0,0] 输出&#xff…

Jquery基础知识

jquery是一个功能强大的第三方库,目前被广泛使用, 微软更是将其作为官方库; 内部封装适配多浏览器,运行速率高于原生 1、写得少&#xff0c;做得多 2、运行速度快 jqurey通过选择器获取标签 $(#myId) //选择id为myId的网页元素 $(.myClass) // 选择class为myClass的元素 $(li)…

【笔试or面试】金山西山居2014校招笔试题

1.32位环境下 #include <stdio.h> #include <iostream> #include <cstring> using namespace std;int main() {char t1[] "ab\0cd";char t2[6] "abcd\0";int t3[4] {0, 0, \0};printf("%d\n",sizeof(t1));printf("%d\…

HTML+CSS+JS面试题(附带答案)

一、单项选择(165题) 1.HTML是什么意思&#xff1f; A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 2.浏览器针对于HTML文档起到了什么作用&#xff1f; A)浏览器用于创建HTML文档 B)浏览器用于查看HTML文档 C)浏览器用于修改HTML文档 D)浏览器用于删除HTM…