rails4 ，用js改变div的背景图片

最新推荐文章于 2022-10-30 18:21:04 发布
原创 最新推荐文章于 2022-10-30 18:21:04 发布 · 954 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#rails4 #js #url #backgroundImage

本文探讨了在Rails4环境中如何使用JavaScript动态更改背景图片的问题。当图片位于app/assets/images目录下时，直接通过JS修改背景图片路径的方法无法生效。文章提供了一种解决方案，即将图片移至public/images文件夹，并调整JS代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

rails4 图片路径设在了 app/assert/images/下，其下有1.jpg和2.jpg

在css样式中可以用 background-image：url(“1.jpg”);  

问题是如果在js中想改变这个背景图片，换成2.jpg，js中如果这样写：document.getElementById( "indexCover" ).style.backgroundImage = "url(2.jpg)";

是没有效果的。具体原因不是很清楚，可能与rails的预编译有关系。

解决办法是，把图片放到public/images/下

document.getElementById( "indexCover" ).style.backgroundImage = "url(./images/2.jpg)";

js 改变div 背景图片
huangwei999111的专栏
11-13 7689
aa.style.backgroundImage = "url(aa.jpg)";
html中选中变背景图,如何在javascript中改变div背景图片？_html/css_WEB-ITnose
weixin_39756192的博客
06-22 663
javascript div背景图片div如下：javascript方法:function changeImg(obj){obj.style.backgroundImage = "url(img/yygk1.png)";//obj.style.backgroundImg = "url(img/yygk1.png)";//obj.style.background = "url(img/yygk1.p...
js改变div背景图片
04-27 1万+
如下： function changeBgImage(obj) { obj.style.background=... } 我想把1.gif变成2.gif，且位置也变一下，例如2px和3px，请问JS里怎么写呢？兄弟们还有没放假的没，HOHO --------------------------------------------------------------- function chang
JS设置div背景
梦里回忆-专栏
09-11 3762
设置div背景为一张图片后： 1.如果想要改变图片的位置，在js中那就用div[0].style.backgroundPosition="0 -70px"; 2.如果想要更换图片，在js中div[0].style.background="url(img/22/a.png)";
背景图片自动切换HTML怎么写div,用js肿么实现div背景图片变换?
weixin_35866747的博客
05-31 252
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//ENHTMLHEADTITLE 图片加载完毕后自动轮换 /TITLEMETA NAME=Generator CONTENT=EditPlusMETA NAME=Author CONTENT=YangHuiMETA NAME=Keywords CONTENT=YangHuiMETA NAM...
Rails中的Ruby图形验证码与加密显示技术详解
此外，`<%= javascript_include_tag: defaults %>`用于引入默认的JavaScript文件，可能包括处理Flash通知动画的代码，如使用`newEffect.Fade`来实现消息淡入淡出的效果，这样在一段时间后（如4秒）自动隐藏消息，以...
基于Rails构建民宿短租系统的搜索和过滤功能
## 1.1 介绍民宿短租系统的背景和需求 民宿短租系统是一个允许用户租赁民宿、公寓或别墅等临时住所的在线平台。对于这类系统，用户通常有各种不同的需求和偏好，比如地理位置、价格、房型、设施等。因此，提供高效...
全面掌握DHTML、CSS和JavaScript开发技巧
例如，可以使用JavaScript动态地改变CSS样式来实现动画效果，或者通过DOM操作来增加或删除页面元素。 1. **DOM操作**：文档对象模型（DOM）是HTML和XML文档的编程接口，JavaScript通过DOM可以访问和修改文档的结构...
探索Odin Project的etch-a-sketch项目：JavaScript和jQuery的完美结合
- **DOM 操作**: 使用 jQuery 选择器和方法来操作 DOM，动态改变画板上的元素属性。 - **动画效果**: jQuery 动画功能可以让绘制过程更加流畅自然。 #### 项目实现的细节 - **初始化设置**: 在页面加载时，初始化...
【图片标注功能实战】：从零到英雄，构建响应式与跨浏览器图片标注应用
[利用JavaScript实现图片标注——SearchMapIdentityTask.doc](https://img-blog.csdnimg.cn/5ea255a96da2452a9b644ac5274f5b28.png) # 摘要 随着数字内容的快速增长，图片标注功能的需求日益增加，本文针对市场需求...
使用JS操作CSS实现JS改变背景图片
qq_48736958的博客
03-12 7357
使用JS操作CSS实现JS改变背景图片 在写一个后台管理系统的界面时候，想要实现每次刷新界面或者访问界面时候会重新加载一张图片并且每次都不一样，于是乎就去想了个方法去实现它，最终方案是通过js来改变div的css属性来实现改变页面背景。 1、上传图片 通过图床上传几张图片到网络上，这样就可以不用在本地获取图片了，然后你会得到你的图片的URL，接着进行下一步 2、改变div的url <div class="main-bg" id="divBg"> //注意，你的js代码一定要等html代码加载完
JavaScript实现更换背景图片
syy的博客
10-30 6125
js实现更换网页背景图片
JavaScript使用DOM对 div 添加图片的 2种方式
no_1back_up的博客
08-25 5541
div添加图片，以下两种方式亲测有效： 方式1：创建img，将img挂载到div上 var d1 = document.getElementById("d1");//获取div元素 var im = document.createElement("img");//创建图片 im.src = "img/1.png"; //图片设置成和div一样大小 im.style.width = d1.style.width; im.style.height = d1.style.height ; d1.appendChi
使用js操作css实现js改变背景图片示例
qq_29663071的博客
04-20 6450
有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图，当然是可以的。具体的方法看下面的实现代码吧 1、用JS定义一个图片数组，里面存放你想要随机展示的图片 复制代码 代码如下: ar imgArr=["http://www.jb51.net/logo_cn.png", "http://www.jb51.net/baidu_sylogo1.gif", "
javascript 修改和取消背景图片
琪花亿草
03-01 6382
在div或表格的单元格中如果加上背景图片，要求取消和显示图片，就可以用如下代码：         document.getElementById("gameback1").style.backgroundImage="url(框2.png)";         document.getElementById("gameback2").style.background="";
JavaScript设置背景图片
热门推荐
Return_KB的博客
01-09 5万+
本章节通过代码实例介绍一下如何利用js实现动态的为div元素设置背景图片。 核心代码片段如下: [JavaScript] 纯文本查看 复制代码运行代码1odiv.style.backgroundImage="url('images/test.jpg')"; 下面给出一个完整的代码实例，使用的背景图片如下: 309x99的图片分隔为9份，每一份的长宽分别是103px和
jquery+js实现修改div元素的背景色
cyrrgt的博客
10-27 692
效果展示 这是效果样式 代码参考 这是CSS代码 <style type="text/css"> .blue{ width: 200px; height: 200px; background-color: blue; } </style> 这是HTML代码 &...
探索Rails 4：《Rails 4 in Action》代码实例分析
Rails 4 in Action是一本关于Ruby on Rails 4的教程书籍，它提供了一系列的实例代码，旨在指导读者如何使用Rails框架开发Web应用。接下来，我们将会详细地探讨Ruby on Rails框架中的相关知识点，同时结合Rails 4的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值