精华内容
下载资源
问答
  • $("#").css("backgroundImage").replace('url(','').replace(')',''); 转载于:https://www.cnblogs.com/echolife/p/5985189.html

    $("#").css("backgroundImage").replace('url(','').replace(')','');

    转载于:https://www.cnblogs.com/echolife/p/5985189.html

    展开全文
  • 
 $("#").css("backgroundImage").replace('url(','').replace(')','');
 
 
 
 
 
 
 
 &...
        

    $("#").css("backgroundImage").replace('url(','').replace(')','');

    展开全文
  • jquery具有隐式迭代的所有一个点击事件就行了 $('.boxs').click(function(){ $(this).css('backgroundImage') }

    jquery具有隐式迭代的所有一个点击事件就行了

    $('.boxs').click(function(){
    $(this).css('backgroundImage')
    }
    
    展开全文
  • 获取 img元素图片 的原始尺寸

    千次阅读 2019-05-08 18:45:10
    项目背景: element-ui 图片上传组件,上传后的图片,点击放大镜icon需要放大显示,居中在弹窗里 <el-dialog :title="bigTit" :visible.sync="dialogVisible" :before-close="handleClose" > <div ...

    项目背景:

    element-ui 图片上传组件,上传后的图片,点击放大镜icon需要放大显示,居中在弹窗里
    插入图片示例

    <el-dialog
        :title="bigTit"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
    >
    <div class="bigPicBox">
        <img :src="bigSrc" alt="" @load="imgLoad(bigSrc)">
    </div>
    </el-dialog>
    
    

    放大
    上传的图片,分别有横向和纵向,那么,在弹窗里,img 宽度 100% 和 高度 100% 都不合适,会导致图片的不正常拉伸。
    所以图片的宽高都需要是 auto,然后 max-width:100% 和 max-height:100%;
    在高版本浏览器,这个是没问题的,但是因为居中显示用的是 flex, 在 IE11, max-width 和 max-height 都无效,最后导致图片 超出弹窗,大概这样:

    图片超出弹窗

    解决方法:

    用js获取图片宽高,再获取 盒子 宽高 , 计算 图片 和 盒子的宽高比
    如果图片宽 > 高,那么比较图片宽度与盒子宽度;
    如果图片高 > 宽,那么比较图片高度与盒子高度;
    如果图片宽度大于 盒子 宽度, 那么图片宽度是盒子宽度,高度通过比例计算;
    如果图片高度大于 盒子 高度, 那么图片高度是盒子高度,高度通过比例计算;

    imgLoad(imgSrc){
        console.log(imgSrc);
        var nemImage = new Image()
        //只有这样才能获取图片的原始宽高!!!!!
        nemImage.src = imgSrc;
        let boxWid = $(".bigPicBox").width();
        let boxHei = $(".bigPicBox").height();
        let boxImgWid = nemImage.width;
        let boxImgHei = nemImage.height;
        let boxScale = (boxWid/boxHei).toFixed(2);
        let imgScale = (boxImgWid/boxImgHei).toFixed(2);                	        	 console.log("boxWid:"+boxWid,"boxHei:"+boxHei,"boxImgWid:"+boxImgWid,"boxImgHei:"+boxImgHei,"boxScale:"+boxScale,"imgScale:"+imgScale);
    	if(boxWid==0 || boxImgWid==0) return;
    	// 如果图片宽>高 imgScale>1,就用图片宽度跟弹窗对比
    	if(imgScale>=1){
    	    console.log("zhengfangxing")
    	    if(boxImgWid>=boxWid){
    	        $(".bigPicBox img").width(boxWid);
    	        $(".bigPicBox img").height(boxWid/imgScale);
    	    };
    	};
    	// 如果图片宽<高 imgScale<1,就用图片高度跟弹窗对比
    	if(imgScale<1){
    	    console.log("changde");
    	    if(boxImgHei>=boxHei){
    	        $(".bigPicBox img").height(boxHei);
    	        $(".bigPicBox img").width(boxHei*imgScale);
    	    };
    	};
    },
    
    重点代码
    	var nemImage = new Image()
    	//只有这样才能获取图片的原始宽高!!!!!
    	//后面还查到一种新办法IE9+
    	img.naturalWidth=>//图片元素本身就可以获取原始宽高,不需再new一个Image();
    
    新方法的查询路径

    JavaScript获取图片的原始尺寸

    最后

    兼容IE好麻烦呀~~

    展开全文
  • 一、用random随机获取列表中的元素
  • DOM笔记一、JS组成二、Web APIs和JS基础关联性三、API和Web API四、DOM4.1 DOM树4.2 获取元素4.3 事件基础4.3 操作元素1.改变元素内容案例:分时显示不同图片,显示不同问候语:happy:2.表单元素操作案例:仿京东显示...
  • ,这样的话他就是继承父元素的高度,而父元素的高度会因为键盘弹起变小,那么背景图图也就会随着高度变小 ##2.解决的关键是window.innerHeight; 我的代码是 背景图的class:"addressbg"; $(document).ready( function ...
  • 1,一个div多个背景色 background: url(图片) no-repeat 95% 50%, -webkit-linear-gradient(#fff, #eee 50%,#ddd);
  • JS背景图片切换

    2020-10-14 20:05:54
    因为图片的名字是从1开始顺序命名的,所以可以通过获取的li元素的索引号来改变背景图片的地址名 将地址名改到body标签的backgroundImage属性中 实现代码 html代码 <!DOCTYPE html> <html lang="en"> ...
  • 因为最近在做一个图片布局的东西,采用的是浮动方式...直接在resize的时候使用元素的offsetWidth来获取宽度数据。但在resize的时候,发现在某些时候会出现布局错误。经过一番查找,问题出在元素宽度表现为带小数的...
  • 应用背景 浏览论坛的贴子(数据库的数据通过vue遍历在html页面上) 点击帖子的标题、图片,可以查看详细的帖子(点击事件获取id) 1、设置一个隐藏值的放置Id的div,点击div就获取id,传参到后台(点击一部分) <...
  • 应用背景 浏览论坛的贴子(数据库的数据通过vue遍历在html页面上) 点击帖子的标题、图片,可以查看详细的帖子(点击事件获取id) 1、设置一个隐藏值的放置Id的div,点击div就获取id,传参到后台(点击一部分) ...
  • 1、背景:前端使用vue,利用ocr识别身份证信息,@change事件执行上传图片代码,当第一张照片选择后,再次选择同样的图片方法就不执行了,如何每次选择图片都让此方法执行呢?这个时候我们只需要获取dom元素将它的value...
  • offsetHeight js获取某个元素的高度。 offsetWidth js 获取某个元素的宽度。 获取某个元素背景图片 var backgroundUrl = document.getElementById("div")[0].style.backgroundImage;
  • 背景  在我的一个项目中用到了背景图片,发现其中有一个问题,当页面长度动态变化时,原来能占满全部内容背景的图片会变得不能占满全部背景。如下图的效果: ... * 根据类名获取元素 */ docu...
  • 当我们自定义博客园博客,更换背景图片时,由于我们无法使用自己计算机的本地图片的url,所以只能使用已在网上的图片URL,第一种办法,是通过上传头像获取,然后审查元素获取图片网络url,但是有局限。第二种,在...
  • /**//// /// 获取上传的图片并保存为缩略图 /// /// 上传图片的保存路径(包括文件名和文件的扩展名) /// 缩略图的保存路径(包括文件名和文件的扩展名) /// 允许编程访问服务器上的HTML元素 public ...
  • /**//// /// 获取上传的图片并保存为缩略图 /// /// 上传图片的保存路径(包括文件名和文件的扩展名) /// 缩略图的保存路径(包括文件名和文件的扩展名) /// 允许编程访问服务器上的HTML元素 public ...
  • js判断所获取元素是否存在

    千次阅读 2018-08-01 11:22:59
    最近要修改前端的一个功能,要获取指定区域的图片的src,但是那个指定区域的数据是不确定的,动态变化,所有时页面可能没有那个元素,如果这样去获取的话会报错null或者undefined,于是想用js来判断一下是否存在这个...
  • background-image,顾名思义是背景图片的意思,设置父亲元素,然后通过background-image:url(‘图片的相对路径’);的办法来设置背景图片,可以将本地图片上传到github,qq 空间或者base64图片 来获取相对路径. 下面有...
  • 在发起请求后,获取背景图片的路径: 然后在 html 中,使用行内式,书写背景图片: <!-- 图片展示 --> <div class="banner" :style="{'backgroundImage':`url(require(${model.banner}))`}"> </...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 250
精华内容 100
关键字:

获取元素背景图片