获取div的background-image属性

最新推荐文章于 2024-10-23 09:03:09 发布
最新推荐文章于 2024-10-23 09:03:09 发布
阅读量1.4w 收藏
点赞数
分类专栏： jsp web前端 文章标签： jsp js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yusimiao/article/details/12716691
版权

之前没有注意过div的background-image这个属性，只是设置它的url，今天遇到一个问题特此做一下记录。

<div id="img_2" style="width:133px;height:95px; cursor:pointer; background-image: url('Chrysanthemum.jpg');" onclick="tempClick()"></div> 


在js中想获取image属性

document.getElementById('img_2').style.backgroundImage;

注意黑体部分哦，div中的是background-image，而获取属性时是backgroundImage。应该是所有这种带有“-”的style都要这么做吧，这个有待验证，

先记录此问题学习。


yusimiao
关注
专栏目录
background 组合写法_css3实现一个div设置多张背景图片及background-image属性
weixin_29184371的博客
12-24 1739
引子以前做网页布局的时候，一个div只能设置一张背景图片，设置多个背景的话，要用多个div嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个div只能设置一个背景的问题，使一个div可以设置多个背景图片。background-image还可以设置线性渐变，等效果。题外话关于css3的background，功能很强大，有很多属性，像backgr...
div+css - CSS标准 - background-image背景图片
gdfjhc的博客
02-09 493
div+css - CSS标准 - background-image背景图片
通过js获取div的background-image属性
10-26
div的background-image这个属性，只是设置它的url，下面为大家介绍下如何获取它的background-image属性，感兴趣的朋友可以参考下
css3实现一个div设置多张背景图片及background-image属性
Preserve
03-26 3361
以前做网页布局的时候，一个div只能设置一张背景图片，设置多个背景的话，要用多个div嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个div只能设置一个背景的问题，使一个div可以设置多个背景图片。background-image还可以设置线性渐变，等效果。 题外话 关于css3的background，功能很强大，有很多属性，像
Css——css 动态绑定 style 中 backgroundImage 背景图片写法
qq_43201350的博客
08-19 316
Css——css 动态绑定 style 中 backgroundImage 背景图片写法
div的background-image
最新发布
m0_68791463的博客
10-23 171
html中设置class为hat，引用css文件中的图片路径无法获取，且无法识别类型。background-image: url("图片所在在线网址");或者放置于html文件中的div格式，中直接设置style格式也可以。识别得到的是text/html文件类型，且404。换成在线网址即可正常显示。
用一个DIV画图通过background-image叠加实现
12-13
本篇将深入探讨如何利用`background-image`属性结合渐变效果，如`radial-gradient`（径向渐变）和`linear-gradient`（线性渐变），在一个`div`元素中绘制复杂的图像。 首先，让我们看看`background-image`属性。这...
css3实现一个div设置多张背景图片及background-image属性实例演示
09-27
在CSS3中，`background-image`属性极大地扩展了对背景图片处理的能力，使得在一个单一的HTML元素（如div）上设置多个背景图片成为可能。这个特性显著提高了网页设计的灵活性和创意性，减少了以往需要通过嵌套div来...
vue的style绑定background-image的方式和其他变量数据的区别详解
10-18
<div v-bind:style="{ backgroundImage: 'url(' + item.videopic + ')' }"></div> ``` 在这个例子中，我们假设item.videopic是一个包含图片路径的变量。我们通过将图片路径与URL字符串拼接，并包裹在url()函数中，...
html div background-image,css3背景background-image
weixin_34145350的博客
06-30 740
css3背景background-imageCSS3中包含几个新的背景属性，提供更大背景元素控制。在本章您将了解以下背景属性： background-sizebackground-origin您还将学习如何使用多重背景图像。浏览器支持 属性 浏览器支持background-sizebackground-originInternet Explorer 9+, Firefox, Chrome, ...
html div background-image,html - DIV background-image overflow - Stack Overflow
weixin_28844359的博客
06-30 145
It is very possible with CSS3. I stumbled on this post while attempting this myself and discovered I could do it.Here's the code I used:#page{width:1024px;height:662px;padding:0 58px 105px 58px;backgr...
【前端】div+background-image和img标签的选择（转）
diyinqian的博客
08-03 6269
前言 一般情况下，标签和div+background-image都能在块级元素中显示图片，之前就在想，这两种方式有什么区别。通过这两天的实践，逐渐摸清了他们之间的区别以及适用情况，在这篇文章中总结他们的使用要点。 区别 浏览器上下文的区别 div上下文 使用div+background-image实现图片显示的时候，该块级元素的上下文为普通的块级上下文 img上下文 而使用...
div+background-image和img标签的选择
若即的专栏
10-17 7092
标签和div+background-image的选择前言  一般情况下，标签和div+background-image都能在块级元素中显示图片，之前就在想，这两种方式有什么区别。通过这两天的实践，逐渐摸清了他们之间的区别以及适用情况，在这篇文章中总结他们的使用要点。区别浏览器上下文的区别  使用div+background-image实现图片显示的时候，该块级元素的上下文为普通的块级上下文而使用im
前端vue中div设置background图片铺满div
susu1083018911的博客
10-09 671
前端vue中div设置background图片铺满div
在js中获取在css中设置的background-image值
weixin_30520015的博客
08-17 2194
1. html部分 <div class="bg-color-two" id="bg_color_two" onclick="setBg(this)"></div> <div class="bg-color-three" id="bg_color_three" onclick="setBg(this)"></div> 2. css部分 ...
如何在div中设置背景图片并且自适应div大小
weixin_43387852的博客
11-16 4万+
参考如下代码，设置背景图片的大小为100% 100%并且设置no-repeat 这样图片就能在div改变的情况下，仍然显示完全 <!DOCTYPE html> <html> <head> <style> #a { background-color: rgb(255, 208, 0); background-image: url("1.png"); backgrou
JavaScript设置背景图片
热门推荐
Return_KB的博客
01-09 5万+
本章节通过代码实例介绍一下如何利用js实现动态的为div元素设置背景图片。 核心代码片段如下: [JavaScript] 纯文本查看 复制代码运行代码1odiv.style.backgroundImage="url('images/test.jpg')"; 下面给出一个完整的代码实例，使用的背景图片如下: 309x99的图片分隔为9份，每一份的长宽分别是103px和
10033---div--background-image的路径问题
xxxcyzyy的博客
08-08 704
给div设置background-image时，搞了半天图片不显示，最后找出原因，是因为url的path不对， 正确的写法是相对于css文件的路径，而不是相对于页面的路径。 background-image:url(path);
JavaScript 拖动随机生成一个设置背景图片的div
程序猿小白的博客
04-13 518
效果如下：图片来源于乌拉拉。 let owrap = document.getElementById("wrap"); // 监听鼠标按下事件 window.onmousedown = (e) => { let div = document.createElement("div"), ...
css background-image 属性
09-21
background-image 属性是 CSS 的一个用于为元素设置背景图片的属性。语法如下： ``` background-image: url(image.jpg); ``` 其中 `url(image.jpg)` 就是指定图片的地址。可以使用相对路径或绝对路径，也可以使用其他图片引用方式，如 data URI。 使用 background-image 属性可以让您在元素上设置一个背景图片，这将作为元素的背景并且覆盖元素内部的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值