setAttribute()与.style.property="值"的区别

最新推荐文章于 2023-12-07 16:57:22 发布
原创 最新推荐文章于 2023-12-07 16:57:22 发布 · 5.4k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#setAttribute #style.property #css

本文解析了HTML元素属性设置与CSS样式设置的区别，详细介绍了setAttribute用于修改HTML属性，如id和class等；而.style.property则用于直接设置CSS样式。同时提到了jQuery提供的.css()方法作为另一种设置CSS样式的途径。

混沌的认为都是设置属性的，那两者有什么区别呢。仔细对比后发现，两者设置的属性是不同的。

setAttribute是给html元素属性设置值的。我主要是没有理解html元素属性这个概念。html元素属性就是指的标签中的键值对的前者，例如<div id="name" class="text"><div>中的id和class就是html元素属性。

.style.property="值"是用来设置css样式的。例如说document.getElementById("#name").style.background="red"设置文本框的背景颜色为红色。

在标签中我们也会内嵌样式，例如<div id="name" class="text" style="width:100px;"><div>，说明style也是html元素的一个属性。在设置的时候可以使用document.getElementById("#name").setAttribute("style","color:red;font:9px;");实际上平时用setAtrribute()这个方法就用的不多，也不太支持这种设置样式属性的写法。

如果引用了jQuery的话，在设置CSS样式的时候还可以使用.css("border","1px solid red");这种方式。


关于style设置方法，obj.setAttribute("style"."")和obj.style.stylename
weixin_33720078的博客
04-17 569
1、使用obj.setAttribute("style"."")方法； obj.setAttribute("style","-webkit-clip-path: polygon(0% 0%, 66% 0, 33% 100%, 0% 100%);float:none;"); obj.setAttribute("style","position:absolute;background-imag...
setAttribute和setProperty的区别
xiuwu0423的专栏
01-08 2185
setAttribute是给html元素属性设置值的。例如&lt;div id="name" class="text"&gt;&lt;div&gt;中的id和class就是html元素属性。 var a = document.getElementsByClassName("img"); a.setAttribute('src','/static/modules/mes/themes/defau...
setAttribute()和setProperty()
EIERICA的博客
03-21 4397
setAttribute()和setProperty() 学习笔记 初学习完setAttribute()和setProperty()后，在项目中使用时不太清楚原理，总是一知半解，最近又遇到关于这两个属性的笔试题，决定更加深入的去理解这两个属性(虽然也不是很深入)。 setAttribue() 关于“特性”Attribute和“属性”Property的了解可以看这位大佬的文章https://www...
JS中setAttribute的使用
chen_wei_1990的专栏
09-14 1966
在web开发中，经常会为某个标签设置属性，那么就可以利用js的setAttribute()方法为标签的属性设置值。   下面的内容翻译自W3C DOM Level 1中关于setAttribute方法的说明.   具体的方法参数如下： object.se
document.getElementById("modifyBtnId").parentNode.style.display = 'block'
09-03
- **描述**：如果 ID 为 `modifyBtnId` 的元素不存在（如拼写错误或动态加载未完成），`getElementById` 返回 `null`，导致后续 `.parentNode.style` 出错（JavaScript 报错：Cannot read property 'style' of null...
element.style.setProperty('color', 'red', 'important');
08-27
- **`setAttribute` 方法**：与 `setAttribute('style', ...)` 不同，`setProperty` 允许通过第三个参数指定优先级，而 `setAttribute` 只能直接设置内联样式字符串。 - **`element.style.property` 方法**：直接...
setWindow(type: number) { const channelLayout = WebChannelMap[type] if (!channelLayout) { return this.reject(ERROR.CHANNEL_TYPE_NOT_EXIST) } const [rows, cols] = channelLayout this.channelType = type this.emit('channel:change', type) console.log([...this.channelWindow.childNodes]) this.channelWindow.innerHTML = '' this.channelWindow.style.setProperty('display', 'grid') this.channelWindow.style.setProperty('grid-template', `repeat(${rows}, 1fr) / repeat(${cols}, 1fr)`) this.channelWindow.style.setProperty('background-color', '#ccc') this.channelWindow.style.setProperty('gap', '1px') for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const item = document.createElement('div') const dataIndex = r * rows + c item.setAttribute('data-index', `${dataIndex}`) item.style.setProperty('grid-area', `${r + 1} / ${c + 1} / ${r + 2} / ${c + 2}`) item.style.setProperty('background-color', '#000') item.style.setProperty('overflow', 'hidden') item.addEventListener('click', (e) => this.onChannelClick(e, item)) this.channelWindow.appendChild(item) } } this.onChannelClick(null, this.channelWindow.childNodes[0] as HTMLElement) return Promise.resolve(type) }解析这段代码的作用
10-18
1. **参数校验与布局配置** 通过`WebChannelMap[type]`获取通道布局的行列配置，若不存在则返回错误`CHANNEL_TYPE_NOT_EXIST`。 2. **初始化界面布局** - 设置容器`channelWindow`为CSS Grid布局，行列数由`...
export const WebChannelMap: Record<string, [number, number] | [number, number, string]> = { 1: [1, 1], 4: [2, 2], 8: [4, 4, 'special-8'], // 特殊8通道布局 6: [3, 3, 'special-6'], // 特殊6通道布局 9: [3, 3], 16: [4, 4] } private createChannelItem(index: number, area: string | null = null) { const item = document.createElement('div') item.setAttribute('data-index', index + '') item.style.cssText = ` background-color: #000; overflow: hidden; ` if (area) item.style.gridArea = area item.addEventListener('click', (e) => this.onChannelClick(e, item)) return item } setWindow(type: number) { const layout = WebChannelMap[type] if (!layout) return this.reject(ERROR.CHANNEL_TYPE_NOT_EXIST) const [rows, cols, layoutType] = layout this.channelType = type this.emit('window:change', type) this.channelWindow.innerHTML = '' this.channelWindow.style.display = 'grid' this.channelWindow.style.setProperty('gap', '1px') if (layoutType) { if (layoutType === 'special-8') { this.channelWindow.style.gridTemplate = ` repeat(4, 1fr) / repeat(4, 1fr) ` } else if (layoutType === 'special-6') { // 6通道特殊布局：2x2合并+5个小格 this.channelWindow.style.gridTemplate = ` repeat(3, 1fr) / repeat(3, 1fr) ` } } else { this.channelWindow.style.gridTemplate = `repeat(${rows}, 1fr) / repeat(${cols}, 1fr)` } if (layoutType) { if (layoutType === 'special-8') { const bigScreen = this.createChannelItem(0, '1 / 1 / 4 / 4') this.channelWindow.appendChild(bigScreen) const positions = [ [0, 3], [1, 3], [2, 3], [3, 0], [3, 1], [3, 2], [3, 3] ] positions.forEach(([r, c], i) => { const area = `${r + 1} / ${c + 1} / ${r + 2} / ${c + 2}` const item = this.createChannelItem(i + 1, area) this.channelWindow.appendChild(item) }) } if (layoutType === 'special-6') { const bigScreen = this.createChannelItem(0, '1 / 1 / 3 / 3') this.channelWindow.appendChild(bigScreen) const positions = [ [0, 2], [1, 2], [2, 0], [2, 1], [2, 2] ] positions.forEach(([r, c], i) => { const area = `${r + 1} / ${c + 1} / ${r + 2} / ${c + 2}` const item = this.createChannelItem(i + 1, area) this.channelWindow.appendChild(item) }) } } else { for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const item = this.createChannelItem(r * rows + c) this.channelWindow.appendChild(item) } } } }我希望把WebChannelMap改成直接的点位数组，然后下面根据点位数组生成窗口，而不是这样使用special的标注生成特殊布局
最新发布
10-29
this.channelWindow.style.setProperty('gap', '1px'); this.channelType = type; this.emit(...); // 如果有positions数组，则使用它们创建元素 if (positions.length > 0) { positions.forEach((area, ...
<template> <div class="drag-verify-container"> <div :style="dragVerifyImgStyle"> <img ref="checkImg" crossOrigin="anonymous" :src="imgsrc" @load="checkimgLoaded" style="width:100%" alt="" > <canvas ref="maincanvas" class="main-canvas" ></canvas> <canvas ref="movecanvas" :class="{goFirst:isOk, goKeep:isKeep}" class="move-canvas" ></canvas> <div class="refresh" v-if="showRefresh && !isPassing" > <i :class="refreshIcon" @click="refreshimg" ></i> </div> <div class="tips success" v-if="showTips && isPassing" >{{successTip}}</div> <div class="tips danger" v-if="showTips && !isPassing && showErrorTip" >{{failTip}}</div> </div> <div ref="dragVerify" class="drag_verify" :style="dragVerifyStyle" @mousemove="dragMoving" @mouseup="dragFinish" @mouseleave="dragFinish" @touchmove="dragMoving" @touchend="dragFinish" > <div class="dv_progress_bar" :class="{goFirst2:isOk}" ref="progressBar" :style="progressBarStyle" > {{successMessage}} </div> <div class="dv_text" :style="textStyle" ref="message" > {{message}} </div> <div class="dv_handler dv_handler_bg" :class="{goFirst:isOk}" @mousedown="dragStart" @touchstart="dragStart" ref="handler" :style="handlerStyle" > <i :class="handlerIcon"></i> </div> </div> </div> </template> <script> export default { name: "dragVerifyImgChip", props: { isPassing: { type: Boolean, default: false }, width: { type: Number, default: 320 }, height: { type: Number, default: 40 }, text: { type: String, default: "swiping to the right side" }, successText: { type: String, default: "success" }, background: { type: String, default: "#eee" }, progressBarBg: { type: String, default: "#76c61d" }, completedBg: { type: String, default: "#76c61d" }, circle: { type: Boolean, default: false }, radius: { type: String, default: "4px" }, handlerIcon: { type: String }, successIcon: { type: String }, handlerBg: { type: String, default: "#fff" }, textSize: { type: String, default: "14px" }, textColor: { type: String, default: "#333" }, imgsrc: { type: String }, barWidth: { type: Number, default: 40 }, barRadius: { type: Number, default: 8 }, showRefresh: { type: Boolean, default: false }, refreshIcon: { type: String }, showTips: { type: Boolean, default: true }, successTip: { type: String, default: "验证通过，超过80%用户" }, failTip: { type: String, default: "验证未通过，拖动滑块将悬浮图像正确合并" }, diffWidth: { type: Number, default: 20 } }, mounted: function() { const dragEl = this.$refs.dragVerify; dragEl.style.setProperty("--textColor", this.textColor); dragEl.style.setProperty("--width", Math.floor(this.width / 2) + "px"); dragEl.style.setProperty("--pwidth", -Math.floor(this.width / 2) + "px"); }, computed: { handlerStyle: function() { return { width: this.height + "px", height: this.height + "px", background: this.handlerBg }; }, message: function() { return this.isPassing ? "" : this.text; }, successMessage: function() { return this.isPassing ? this.successText : ""; }, dragVerifyStyle: function() { return { width: this.width + "px", height: this.height + "px", lineHeight: this.height + "px", background: this.background, borderRadius: this.circle ? this.height / 2 + "px" : this.radius }; }, dragVerifyImgStyle: function() { return { width: this.width + "px", position: "relative", overflow: "hidden" }; }, progressBarStyle: function() { return { background: this.progressBarBg, height: this.height + "px", borderRadius: this.circle ? this.height / 2 + "px 0 0 " + this.height / 2 + "px" : this.radius }; }, textStyle: function() { return { height: this.height + "px", width: this.width + "px", fontSize: this.textSize }; } }, data() { return { isMoving: false, x: 0, isOk: false, isKeep: false, clipBarx: 0, showErrorTip: false }; }, methods: { draw: function(ctx, x, y, operation) { var l = this.barWidth; var r = this.barRadius; const PI = Math.PI; ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI); ctx.lineTo(x + l, y); ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI); ctx.lineTo(x + l, y + l); ctx.lineTo(x, y + l); ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true); ctx.lineTo(x, y); ctx.lineWidth = 2; ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; ctx.strokeStyle = "rgba(255, 255, 255, 0.8)"; ctx.stroke(); ctx[operation](); ctx.globalCompositeOperation = "destination-over"; }, checkimgLoaded: function() { const img = this.$refs.checkImg; if (!img.complete || img.naturalWidth === 0) { img.onload = () => this.drawMissingPart(); // 图片加载完成后重试 return; } this.drawMissingPart(); }, drawMissingPart: function() { // 生成图片缺失位置 var barWidth = this.barWidth; var imgHeight = this.$refs.checkImg.height; var imgWidth = this.$refs.checkImg.width; var halfWidth = Math.floor(this.width / 2); var refreshHeigth = 25; var tipHeight = 20; var x = halfWidth + Math.ceil(Math.random() * (halfWidth - barWidth - this.barRadius - 5)); var y = refreshHeigth + Math.floor( Math.random() * (imgHeight - barWidth - refreshHeigth - tipHeight) ); this.$refs.maincanvas.setAttribute("width", imgWidth); this.$refs.maincanvas.setAttribute("height", imgHeight); this.$refs.maincanvas.style.display = "block"; var canvasCtx = this.$refs.maincanvas.getContext("2d"); this.draw(canvasCtx, x, y, "fill"); this.clipBarx = x; var moveCanvas = this.$refs.movecanvas; moveCanvas.setAttribute("width", imgWidth); moveCanvas.setAttribute("height", imgHeight); this.$refs.movecanvas.style.display = "block"; const L = barWidth + this.barRadius * 2 + 3; //实际宽度 var moveCtx = this.$refs.movecanvas.getContext("2d"); moveCtx.clearRect(0, 0, imgWidth, imgHeight); this.draw(moveCtx, x, y, "clip"); moveCtx.drawImage(this.$refs.checkImg, 0, 0, imgWidth, imgHeight); var y = y - this.barRadius * 2 - 1; const ImageData = moveCtx.getImageData(x, y, L, L); moveCanvas.setAttribute("width", L); moveCanvas.setAttribute("height", imgHeight); moveCtx.putImageData(ImageData, 0, y); }, dragStart: function(e) { if (!this.isPassing) { this.isMoving = true; this.x = (e.pageX || e.touches[0].pageX) } this.showBar = true; this.showErrorTip = false; this.$emit("handlerMove"); }, dragMoving: function(e) { if (this.isMoving && !this.isPassing) { var _x = (e.pageX || e.touches[0].pageX) - this.x; var handler = this.$refs.handler; handler.style.left = _x + "px"; this.$refs.progressBar.style.width = _x + this.height / 2 + "px"; this.$refs.movecanvas.style.left = _x + "px"; } }, dragFinish: function(e) { if (this.isMoving && !this.isPassing) { var _x = (e.pageX || e.changedTouches[0].pageX) - this.x; if (Math.abs(_x - this.clipBarx) > this.diffWidth) { this.isOk = true; var that = this; setTimeout(function() { that.$refs.handler.style.left = "0"; that.$refs.progressBar.style.width = "0"; that.$refs.movecanvas.style.left = "0"; that.isOk = false; }, 500); this.$emit("passfail"); this.showErrorTip = true; } else { this.passVerify(); } this.isMoving = false; } }, passVerify: function() { this.$emit("update:isPassing", true); this.isMoving = false; var handler = this.$refs.handler; handler.children[0].className = this.successIcon; this.$refs.progressBar.style.background = this.completedBg; this.$refs.message.style["-webkit-text-fill-color"] = "unset"; this.$refs.message.style.animation = "slidetounlock2 3s infinite"; this.$refs.progressBar.style.color = "#fff"; this.$refs.progressBar.style.fontSize = this.textSize; this.isKeep = true; setTimeout(() => { this.$refs.movecanvas.style.left = this.clipBarx + "px"; setTimeout(() => { this.isKeep = false; this.$refs.maincanvas.style.display = "none"; this.$refs.movecanvas.style.display = "none"; }, 200); }, 100); this.$emit("passcallback"); }, reset: function() { this.reImg(); this.checkimgLoaded(); }, reImg: function() { this.$emit("update:isPassing", false); const oriData = this.$options.data(); for (const key in oriData) { if (Object.prototype.hasOwnProperty.call(oriData, key)) { this[key] = oriData[key] } } var handler = this.$refs.handler; var message = this.$refs.message; handler.style.left = "0"; this.$refs.progressBar.style.width = "0"; handler.children[0].className = this.handlerIcon; message.style["-webkit-text-fill-color"] = "transparent"; message.style.animation = "slidetounlock 3s infinite"; message.style.color = this.background; this.$refs.movecanvas.style.left = "0px"; this.$refs.maincanvas.style.display = "block"; this.$refs.movecanvas.style.display = "block"; }, refreshimg: function() { this.$emit("refresh"); } }, watch: { imgsrc: { immediate: false, handler: function() { this.reImg(); } } } }; </script> <style scoped> .drag_verify { position: relative; background-color: #e8e8e8; text-align: center; overflow: hidden; } .drag_verify .dv_handler { position: absolute; top: 0px; left: 0px; cursor: move; } .drag_verify .dv_handler i { color: #666; padding-left: 0; font-size: 16px; } .drag_verify .dv_handler .el-icon-circle-check { color: #6c6; margin-top: 9px; } .drag_verify .dv_progress_bar { position: absolute; height: 34px; width: 0px; } .drag_verify .dv_text { position: absolute; top: 0px; color: transparent; -moz-user-select: none; -webkit-user-select: none; user-select: none; -o-user-select: none; -ms-user-select: none; background: -webkit-gradient( linear, left top, right top, color-stop(0, var(--textColor)), color-stop(0.4, var(--textColor)), color-stop(0.5, #fff), color-stop(0.6, var(--textColor)), color-stop(1, var(--textColor)) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-size-adjust: none; animation: slidetounlock 3s infinite; } .drag_verify .dv_text * { -webkit-text-fill-color: var(--textColor); } .goFirst { left: 0px !important; transition: left 0.5s; } .goKeep { transition: left 0.2s; } .goFirst2 { width: 0px !important; transition: width 0.5s; } .drag-verify-container { position: relative; line-height: 0; } .refresh { position: absolute; right: 5px; top: 5px; cursor: pointer; font-size: 20px; z-index: 200; } .tips { position: absolute; bottom: 0; height: 20px; line-height: 20px; text-align: center; width: 100%; font-size: 12px; z-index: 200; } .tips.success { background: rgba(255, 255, 255, 0.6); color: green; } .tips.danger { background: rgba(0, 0, 0, 0.6); color: yellow; } .main-canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .move-canvas { position: absolute; top: 0; left: 0; z-index: 100; } </style> <style> @-webkit-keyframes slidetounlock { 0% { background-position: var(--pwidth) 0; } 100% { background-position: var(--width) 0; } } @-webkit-keyframes slidetounlock2 { 0% { background-position: var(--pwidth) 0; } 100% { background-position: var(--pwidth) 0; } } </style> 缺失图片经常不显示
07-23
在 Vue 组件中使用 `canvas` 绘制图片时，即使图片加载完成仍可能不显示，这通常与 DOM 元素获取时机、图片跨域问题、或 `canvas` 上下文状态有关。以下是一些常见问题及其解决方案： ### 1. 确保正确获取 canvas ...
setAttribute与style.property：关于初识HTML DOM属性设定的一点思考
博客
07-31 996
对于HTML DOM 来说，我一直用setAttribute来设定属性值，后来很多问题通过 document.getElementsByTagName("id").setAttribute("type","button"); 来设定，很多情况都没有成功。 问了问前端的相关人员，他们说是通过CSS样式设定来解决。 document.getElementById("id").style....
setAttribute()方法的使用
热门推荐
SHUSHANGLIUMIAN的博客
07-11 1万+
setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。语法：element.setAttribute(attributename,attributevalue)getAttribute()方法返回指定属性名的属性值element.getAttribute(attributename);作业：定义一个高度和宽度都为200像素的球形盒子，通过生...
元素的属性及样式设置
weixin_48780364的博客
09-13 485
元素的属性及样式设置（小白自结）
setAttribute设置class,style,事件时的浏览器兼容性
木木的森林的博客
07-01 1707
setAttribute设置class,style,事件时的浏览器兼容性
js中setAttribute()在IE7存在的异常（无法设置class，style）
kaosini的专栏
07-04 3637
javascript中的setAttribute()浏览器的兼容性问题 1.element要用getElementById or ByTagName来得到， 2.setAttribute("class", vName)中class是指改变"class"这个属性，所以要带引号。 3.IE中要把class改成className,.....IE不认class,所以最好写两句，都用上吧。
js中setAttribute 的兼容性
weixin_30216561的博客
02-20 190
class和className兼容方法： object.setAttribute("class","content") 在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。 object.setAttribute("className","content") 只有IE7能设置成功，但是其他浏览器均无法设置。 兼容方法： 使用object.classNa...
style.setProperty
m0_61840359的博客
12-07 1881
下面来说一下 setProperty ，是HTMLElement 的方法，用于设置元素的 CSS 样式属性。是 CSS 伪类选择器，代表文档的根元素，通常是。来引用该变量，并将元素的颜色设置为这个值。，这样在整个文档中可以使用。获取文档中的根元素。
元素的样式设置
qq_52654932的博客
03-23 320
pageX和pageY：包括滚动条滚动的距离。触发点距离浏览器左侧和上侧的距离。
js中元素样式设置的六种方法
weixin_52452081的博客
03-23 7297
pink;</</</</
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值