样式操作案例5-改变box的大小和位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
} .cls {
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
background-color: pink;
}
</style>
</head>
<body>
<input type="button" value=" 点我 " id="btn">
<br>
<div id="box"></div> <script src="common.js"></script>
<script>
my$('btn').onclick = function () {
var box = my$('box');
// 改变box的大小和位置
// 使用class
// box.className = 'cls';
//
// 使用style 设置大小和位置的时候 数字必须带单位
box.style.width = '200px';
box.style.height = '200px'; box.style.position = 'absolute';
box.style.left = '200px';
box.style.top = '200px'; console.log(box.style);
} </script>
</body>
</html>
common中的代码
function my$(id) {
return document.getElementById(id);
}
样式操作案例5-改变box的大小和位置的更多相关文章
- C++ MFC 改变控件大小和位置
用CWnd类的函数MoveWindow()或SetWindowPos()可以改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...
- MFC 改变控件的大小和位置
mfc 改变控件大小和位置用到的函数: ) void MoveWindow(int x, int y, int nWidth, int nHeight); ) void MoveWindow(LPCR ...
- js操作元素导致元素错位和大小改变
使用js循环的方式批量控制元素的大小时结果往往不尽如人意. 我总结了一条规律 在一个循环体内不可以同时存在一下两种操作,否则容易导致元素错位或大小改变: 1.对元素的offsetWidth.offse ...
- JQuery DOM操作（属性操作/样式操作/文档过滤）
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- jquery加载方式，选择器，样式操作
原生js和css不兼容,jquery已经过测试,可放心使用 https://code.jquery.com 这个网站可以下载jquery的源码,比如把源码下载到js文件夹中,文件名为jquery- ...
- jQuery属性和样式操作
回顾 1. jquery基本使用 <script src="jquery.min.js"></script><script> $(functio ...
- jQuery 2.0.3 源码分析 样式操作
根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...
- JQuery_元素样式操作
元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握. 一.css()方法 ...
- JavaScipt 样式操作
我们知道HTML样式定义的三种方式: <link/>外部引入也就是定义 CSS 中的 <style/>嵌入式样式 style特性地定义 给一个HTML元素设置css属性,如: ...
随机推荐
- Reflection 基础知识(二)
Proxy 定义 Proxy用于修改对象的某些行为,获取值,设置值等 let p = new Proxy(target, handler); target 用Proxy包装的目标对象(可以是任何类型的 ...
- Vue.js高效前端开发 • 【Vue基本指令】
全部章节 >>>> 文章目录 一.Vue模板语法 1.插值 2.表达式 3.指令概述 4.实践练习 二.Vue绑定类样式和内联样式 1.Vue绑定类样式 2.Vue绑定内联样式 ...
- Sentry 企业级数据安全解决方案 - Relay 入门
内容整理自官方开发文档 Sentry Relay 通过提供作为应用程序和 sentry.io 之间中间层的独立服务来提供企业级数据安全性. Relay 专门设计用于: 在将个人身份信息 (PII) 发 ...
- unittest_expectedFailure预期用例失败（5）
在断言用例执行结果时,会出现预期结果与实际结果不一致的情况,此时我们明确知道用例执行结果为FAIL,不想看到打印错误信息怎么办? 使用装饰器@unittest.expectedFailure标记该用例 ...
- Flask_环境部署（十六）
flask自带的服务器,无法满足性能要求,我们这里采用Gunicorn做wsgi容器,来部署flask程序并使用 Nginx 做前端代理实现分流.转发.负载均衡,以及分担服务器的压力. Gunicor ...
- nginx安装，手动源码安装
什么是Nginx? Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Ra ...
- spring boot --- 注解 @Bean 和@Component
1.前言 @Bean是给方法注册bean @Component是给不好归类的类注册bean 2.可以达到一样的效果 (1)@Component 直接注册即可 完整源码 package com.exam ...
- vue爬坑之路（webpack 配置篇）
在vue cli下 1.npm run dev 打开浏览器在config的index.js中修改autoOpenBrowser为true 关闭sourcemap productionSourceMap ...
- MySQL提权之udf提权(无webshell的情况)
0x00 介绍 本篇我们来讲无webshell时利用udf进行提权 0x01 前提 1. 必须是root权限(主要是得创建和抛弃自定义函数) 2. secure_file_priv=(未写路径) 3. ...
- 《剑指offer》面试题36. 二叉搜索树与双向链表
问题描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的循环双向链表.要求不能创建任何新的节点,只能调整树中节点指针的指向. 为了让您更好地理解问题,以下面的二叉搜索树为例: 我们希望将这个二叉搜 ...