专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

js中Document对象操作、样式、属性、效果

发布时间: 文章来源:www.iduyao.cn 采编人员:毒药  

Windows对象主要是操作浏览器外层的东西;
而DOM对象是操作浏览器里面的东西。

Document:文档对象模型→DOM:
可以做一些特效(抢票的),摘出网页的某一元素(标签),找到他们然后增删改。

一、找元素

1、根据ID找元素

document的获取方式:

根据id进行获取元素的方式如下:

var idq = document.getElementById("idq");
alert(idq);

2、根据class获取元素

var o_class1 = document.getElementsByClassName("divclass");//(数组)
alert(o_class1);

3、根据标签获取元素

4、根据name找元素

var ss = document.getElementsByName("ys")
    alert(ss[0]);

name是多个也是复数。

二、操作元素

1、操作内容

①非表单元素

(1)获取文本:innerText

(2)设置文本

(3)获取html代码

如果想要获取div中,包括span中的所有的代码:

(4)设置Html代码

设置HTML代码,是可以增加动态效果的,输出时页面显示效果。反之,如果使用innerText,就会将效果(<b>加粗</b>)同时也显示出来了。

②表单元素

(1)赋值(设置一个值)


var b1 = document.getElementById("b1");
//    alert(value = "请输入内容");  //提示框输出
    b1.value = "请输入内容";   //网页输出

(2)获取值(取值)

alert(b.value);

2、操作属性

①添加属性(设置)

//添加属性
    var d1 = document.getElementById("idq");
    d1.setAttribute("style","color: red");


②获取属性

getAttribute

<div id="idq" iid="我在这里"><span>获取文本</span></div>

<script type="text/javascript">
  var d1 = document.getElementById("idq");
    alert(d1.getAttribute("iid"));
</script>

③移除属性

removeAttribute

var d1 = document.getElementById("idq");
    d1.removeAttribute("iid");

3、操作样式

①获取样式(只能获取内联样式)

JS在获取样式时,只能获取内联的!其他像内嵌和外部的需要使用jquery才可以。

function showa(){
        //1、获取样式
        var d2 = document.getElementById("d2");
        alert(d2.style.color)
    }

②设置样式

function ang(){
        var d2 = document.getElementById("d2");
        //设置样式
        d2.style.backgroundColor = "red"
    }

这世界只有懒人。没有庸人!

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
   2205阅读

很多样式一起写:

document.getElementById("div2").style.cssText ="很多定义一次写"

毒药   2020-02-17 17:06:36
1
登录 后发表评论

热门分类:

Web开发 | Web前端 | HTML/CSS | php | ASP | JavaScript | jQuery | HTML5 | vbScript | Ajax | 网页设计 | 跨浏览器开发 | 高性能WEB开发 | Web Service | XML/SOAP | CGI | 数据库 | SQL | MySQL | NoSQL | Oracle技术 | Oracle管理 | Oracle开发 | Oracle面试 | Oracle Exception | Sql Server | Informix | Sybase | DB2 | Access | VFP | 数据仓库 | 高性能数据库开发 | 其他数据库 | 移动开发 | Android | Iphone | Windows Mobile | Symbian | BlackBerry | QT开发 | Brew | MeeGo | 移动平台 | 电信IT应用开发 | 移动应用 | Java Web开发 | J2EE | J2SE | J2ME | Java面试 | Java相关 | Eclipse | Java Exception | 企业开发 | 企业信息化 | 行业应用 | GIS | SAP | Tivoli | Lotus | Exchange | SharePoint | Dynamics CRM | K2 BPM | 报表 | 嵌入开发 | WinCE | 硬件开发 | 单片机 | 汇编语言 | 驱动开发 | Wireless | VxWorks | 应用服务器 | Apache | IIS | JBoss | WebSphere | Weblogic | ColdFusion | 研发管理 | 项目管理 | 开发过程 | 开发方法 | 软件设计 | 设计模式 | 软件架构设计 | 敏捷开发 | 微创软件开发 | CVS/SVN | VSTS | PowerDesigner | Rational | 软件测试 | C# | ASP.NET | WinForm | WCF | CLR | WPF | XNA | Visual Studio | WinRT Metro | .NET Framework | VB Dotnet | VC | .NET分析设计 | .NET组件控件 | J# | Delphi | .NET报表 | LINQ | .NET新技术 | .NET面试 | .NET相关 | DotNet Exception | Linux/Unix | Solaris | AIX | 多媒体/流媒体开发 | 多媒体设计 | 交互式开发 | Flash | 图形/图像 | 图像工具使用 | Flex | AutoCAD | Silverlight | C++ | C语言 | C++ Builder | 网络通信 | PB | Ruby/Rails | Perl/Python | Erlang | Go | Swift | Verilog | 编程 | 其他开发语言 | Open API | 信息/网络安全 | IBM云计算 | Paypal | VOIP | Google技术 | 人工智能