JS操作标签的值、属性、样式。

DOM操作要先获取元素或标签等节点:

document.getElementById(‘id‘);

对表单如input进行操作:

获取值var users=document.getElementById(‘user‘).value;

赋值users=document.getElementById(‘user‘).value=‘abcdefg‘

非表单使用innerHTML替换value:

innerHTML:返回的是标签内的html内容,包含html标签

var dicy.innerHTML="这是新的非表单的值";
innerText:返回文本值
(通过innerHTML时会获取到<span>文字</span>标签,innerText只获取到文字)
操作属性 attribute

get取值,set设置,remove删除
attribute(‘属性值‘)
getAttribute(‘属性名‘)

<a href="" target="" value="this is link" id="">

var aaa=document.getElementById(‘id‘)

var aaaGet=aaa.getAttribute(‘targe‘)
var aaaSet=aaa.setAttribute(‘target‘,‘_blank‘)
var aaaRemove=aaa.removeAttribute(‘属性名‘)

操作style样式:
标签对象.style.样式名(获取样式名的值)
标签对象.style.样式名=‘样式值‘

var aaaColor=aaa.style.backgroundColor;

var aaaSetColor=aaa.style.backgroundColor="red";

原文地址:https://www.cnblogs.com/god3064371/p/11371741.html

时间: 2024-10-02 20:11:17

JS操作标签的值、属性、样式。的相关文章

JS(四)DOM模型之属性样式

一.DOM模型 1.简介 DOM模型:文档对象模型,Document Object Model. DOM何时创建:当网页被加载的时候,浏览器就会创建页面的文档对象模型. 2.作用 通过DOM模型,用户可以修改HTML元素属性和样式,增减HTML元素,响应HTML元素的事件. 二.常用JS DOM功能 1.输出流:document.write(),动态创建页面输出内容. 2.改变标签内容:document.getElementById("id").innerHTML="&quo

a 标签中 title 属性样式修改

无文字描述,直接上测试页,看效果. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <style> 5 #tpli

js原生设计模式——8单例模式之简约版属性样式方法库

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>单例模式——在js中就是指的单个对象,可用于命名空间声明</title> </head><body>    <div id="box"></div></body><

javascript操作html元素CSS属性

下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

JS操作属性、样式

JS操作属性:aaa.getAttribute("属性名"); - 取出aaa这个dom对象的属性名中的属性值 aaa.removeAttribute("属性名"); -移除该属性 aaa.setAttribute("属性名","值"); --添加/修改此属性 window.setTimeout("b()", 3000); --等待3秒,执行b这个方法,执行一遍window.setInterval('aaa

JS操作属性和样式

JS操作属性:aaa.getAttribute("属性名"); - 取出aaa这个DOM对象的属性名中的属性值aaa.removeAttribute("属性名"); -移除该属性aaa.setAttribute("属性名","值"); --添加/修改此属性 window.setTimeout("b()", 3000); --等待3秒,执行b这个方法,只执行一遍.window.setInterval('aaa

UI标签库专题一:JEECG智能开发平台 BaseTag(样式表和JS引入标签)

UI标签库专题一:JEECG智能开发平台 BaseTag(样式表和JS引入标签) 1.BaseTag(样式表和JS引入标签) 1.1. 示例 <t:base type="jquery,easyui,tools"></t:base> 1.2. 参数 属性名 类型 描述 type string JS插件类型定义如果有多个以逗号隔开 1.3.  JS插件类型 插件名 描述 Jquery 引入版本jquery-1.8.3 Easyui 引入版本jquery.easyui

JS 操作Dom节点之样式

为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式: <!--body --><div style="width: 30px;background-color: #ff6a00;">我就是傻里傻气的,完全素颜!</div> 1 //内联样式优先级最高,通过style获取的样式是最准确的 2 var el

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条 一丶jQ操作标签内文本 html() 标签元素中的内容 /** 替换的内容可以使一个js对象,jq对象,文本 **/ /* 获取值:获取选中标签元素的所有内容 ,包括标签*/ $('ul').html() " <li>1</li> <li&g