//需求,创建一个div,添加到页面上,给div添加属性
//面向对象开发,构造函数创建类
function divTag(){
this.div1=document.createElement('div');
this.appendTo=function(node){
node.appendChild(this.div1);
return this;//将构造函数的new的新对象返回,因为它里面有这两个方法,所以才能链式操作
}
this.css=function(obj){
for(var k in obj){
this.div1.style[k]=obj[k];
};
return this;//将构造函数的new的新对象返回,因为它里面有这两个方法,所以才能链式操作
};
}

//实例化
var div =new divTag();
div.css({
'border':'1px dotted red',
'width':'100px',
'height':'200px'
}).appendTo(document.body);

模拟jq的设置样式的更多相关文章

  1. jQ的隐式迭代和设置样式属性

    jQ中的隐式迭代 意义:不需要原生迭代了,在jQ内部自动帮你实现了循环 代码实现: let arr = document.querySelectorAll('li') for(let i = 0;i ...

  2. css3模拟jq点击事件

    还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...

  3. jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  4. (20)jQuery的文档操作(创建,添加、设置样式和删除等)

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...

  5. word-wrap&&word-break,奇偶行、列设置样式

    1.word-wrap和word-break区分. 来源场景:机械租赁mvc驾驶员信息查看: 当备注的文字多的时候,第一列的值成这模样: 解决方案:设置table 的td可自动换行.首先table设置 ...

  6. 注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式

    注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式 这个坑,必须要注意呀, 比如在用ListView的时候,如果在List_ ...

  7. Vue系列: 如何通过组件的属性props设置样式

    比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components ...

  8. 【使用 DOM】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  9. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

随机推荐

  1. 02.centos7上搭建hadoop集群

    接上一篇  https://www.cnblogs.com/yjm0330/p/10069224.html 一.准备工作:无密登陆 1.编辑/etc/hosts文件,分别增加 192.168.2.24 ...

  2. C语言程序设计:现代方法(第2版)第三章全部习题答案

    前言 本人在通过<C语言程序设计:现代方法(第2版)>自学C语言时,发现国内并没有该书完整的课后习题答案,所以就想把自己在学习过程中所做出的答案分享出来,以供大家参考.这些答案是本人自己解 ...

  3. (数据科学学习手札51)用pymysql来操控MySQL数据库

    一.简介 pymysql是Python中专门用来操控MySQL数据库的模块,通过pymysql,可以编写简短的脚本来方便快捷地操控MySQL数据库,本文就将针对pymysql的基本功能进行介绍: 二. ...

  4. ASP.NET Web Form 与 ASP.NET MVC 区别

    Asp.net 微软提供web开发框架或者技术.分Web Form和ASP.NET MVC.下面简单说明各自优缺点及使用场景. Web Form ASP.NET Webform提供了一个类似于winf ...

  5. 201552-53 《Java程序设计》第五周问题汇总

    201552-53 <Java程序设计>第五周问题汇总 1.编译时,终端显示: 注:XXX.java使用了未经检查或不安全的操作,如何解决? 解答:并不是错误,可以忽视. 2.构造函数与类 ...

  6. 20155308 2016-2017-2《Java程序设计》课程总结

    20155308 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1:回答"我专业吗.我的老师.师生关系.代码问题"四个问题. 预备作业2 ...

  7. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(零) 前言(内容已过期,阅读请慎重)

    2018-09-19 更新 :现在已经更新ASP.NET Core Middleware版本.对.NET Core SignalR感兴趣的朋友移步:https://github.com/fanpan2 ...

  8. bzoj1861 书架

    bzoj1861 书架 原题链接 神题... 先吐槽洛谷的样例 10 10 1 3 2 7 5 8 10 4 9 6 Query 3 Top 5 Ask 6 Bottom 3 Ask 3 Top 6 ...

  9. javaweb(二十九)——EL表达式

    一.EL表达式简介 EL 全名为Expression Language.EL主要作用: 1.获取数据 EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数 ...

  10. javaweb(十九)——JSP标签

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...