css/js小技巧(代码片段)

qian-shan qian-shan     2022-12-08     337

关键词:

js中动态添加的css属性,自动添加前缀,适配当前浏览器

let elementStyle = document.createElement(‘div‘).style

let vendor = (() => 
  let transformNames = 
    webkit: ‘webkitTransform‘,
    Moz: ‘MozTransform‘,
    O: ‘OTransform‘,
    ms: ‘msTransform‘,
    standard: ‘transform‘
  

  for (let key in transformNames) 
    if (elementStyle[transformNames[key]] !== undefined) 
      return key
    
  

  return false
)()

export function prefixStyle(style) 
  if (vendor === false) 
    return false
  

  if (vendor === ‘standard‘) 
    return style
  

  return vendor + style.charAt(0).toUpperCase() + style.substr(1)

js中获取/设置指定元素的属性(height等)

//给该元素添加ref属性,通过引用来获取
this.imageHeight = this.$refs.bgImage.clientHeight
this.$refs.list.style.top = `$this.$refs.bgImage.clientHeightpx`;
// 如果使用属性名的变量的话就不好使用点来设置属性值:
let transform = ‘webkitTransform‘
this.$refs.bgImage.style[transform] = `scale($scale)`

将元素的移到中间

父容器设置position为relative或者fix
子元素设置position为absolute, top

  .list 
    position: fixed;   // 父容器设置为relative护着fix
    .loading-wrapper
      position: absolute;  //子容器设置为absolute
      width: 100%;
      top: 50%;    //  top为 50%
      transform: translateY(-50%);   // 然后在向上移动一半个自己的身位
    
  

小技巧—卡格式(代码片段)

小技巧—卡格式有很多毒瘤题卡格式。正常是只比数,不比多余空格、制表符、回车。但是有的题就是比。咋整呢?比如,输出一个序列,最后有回车。其他都是空格,最后没空格。就这样:printf("%lld%c",fa[i],i==n?‘‘:‘‘);岂不... 查看详情

funnycarracing-最短路小技巧(代码片段)

DescriptionThereisafunnycarracinginacitywithnjunctionsandmdirectedroads.Thefunnypartis:eachroadisopenandclosedperiodically.Eachroadisassociatewithtwointegers(a,b),thatmeanstheroadwillbeopenforaseconds 查看详情

springboot开放小技巧(代码片段)

实战引入依赖修改配置导入组件开放小技巧lombok对象用<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency>@NoArgsConstructor无参构造器@AllArgsConst 查看详情

开发小技巧(代码片段)

1.prittyprintxmlBeautifulSoupfrombs4importBeautifulSoupxml=‘<group><id>base</id><name>Base</name><default>false</default><uservisible>false</uservisi 查看详情

sql小技巧(持续汇总)(代码片段)

身份证号加密selectconcat(left(`visitors`.`Card_id`,3),‘****‘,right(`visitors`.`Card_id`,4))AS`Card_id`fromuserinfo  查看详情

python小技巧(代码片段)

pip安装超时异常信息:pip._vendor.urllib3.exceptions.ReadTimeoutError:HTTPSConnectionPool(host=‘files.pythonhosted.org‘,port=443):Readtimedout解决方案:在执行安装命令的时候,可以指定超时时间具体命令:pip--default-timeout=100install包名  查看详情

小技巧_01(代码片段)

当获取到的数据不存在时,可以通过设置一个len(data)设置一个长度,过滤掉不到长度的数据设置一个布尔类型的全局变量当访问到时设置为True如果没有访问到,则设置为False根据全局变量的值,判断是否继续进行访问2020-05-28 查看详情

python小技巧(代码片段)

同时遍历两个列表1nfc=["Packers","49ers"]2afc=["Ravens","Patriots"]3fori,jinzip(nfc,afc):4print(i,j)PackersRavens49ersPatriots列表转换成字符串1teams=["Packers","49ers","Ravens","Patriots"]2print(‘,‘.join(teams))3type( 查看详情

kotlinkotlin中的小技巧(代码片段)

本文目录kotlin学习-魔术类小技巧1.字符串内嵌表达式2.函数的参数默认值kotlin学习-魔术类小技巧1.字符串内嵌表达式不需要像Java那样去拼接字符串,而是可以直接将表达式写在字符串里面funmain()valname="Diana"valage=12... 查看详情

css小技巧(代码片段)

1.用css伪元素勾勒出关闭按钮.boxposition:relative;padding:10px;width:200px;height:100px;border:1pxsolid#e1e1e1;&:afterclear:both;content:".";display:block;height:0;line-height:0;overflow:hidden;.closeposi 查看详情

.net性能优化小技巧(代码片段)

.NET性能优化小技巧Intro之前做了短信发送速度的提升,在大师的指导下,发送短信的速度有了极大的提升,学到了一些提升.NET性能的一些小技巧HttpClient优化关于使用HttpClient,大概很多人都知道尽量使用单例以提升HttpClient的性... 查看详情

python小技巧整理(代码片段)

一、python小工具:1、内置下载和网站:进入相应目录:2.xpython-mSimpleHTTPServer3.xpython-mhttp.server2、字符串转换为JSON[[email protected]~]#echo‘"job":"developer","name":"1mx","sex":"male"‘|python-mjson.tool"job":"develop 查看详情

vs2017一些小技巧(代码片段)

下面我总结一些VS2017中的一些小技巧这些小技巧,大神的你有可能早就知道了,也有可能我少说了,如果你觉得我写的不对,欢迎在下方进行评论:1.TODO的使用当你编辑代码的时候是不是遇到过,一个地方的代码需要调用另一个... 查看详情

查看wifi密码小技巧(代码片段)

for/f"skip=9tokens=1,2delims=:"%iin('netshwlanshowprofiles')do@echo%j|findstr-i-vecho|netshwlanshowprofiles%jkey=clear可以查看连过的所有wifi密码。 查看详情

kotlin小笔记kotlin中的小技巧(代码片段)

本文目录kotlin学习-魔术类小技巧1.字符串内嵌表达式2.函数的参数默认值kotlin学习-魔术类小技巧1.字符串内嵌表达式不需要像Java那样去拼接字符串,而是可以直接将表达式写在字符串里面funmain()valname="Diana"valage=12... 查看详情

input使用小技巧(代码片段)

   ①:如何修改placeholder样式?    input::-webkit-input-placeholdercolor:#ccc;font-size:15px;    注:其它浏览器适配方案              原文参考:https://webfem.com/post/placeholder &nb 查看详情

超实用的jquery小技巧(代码片段)

...Script的编程。今天我们总结了下平常项目中用到的一些小技巧,仅供参考。1、替换元素//替换元素$(document).ready(function()$("#id").replaceWith(‘<p>Ihavebeenrepaced</p>‘));2、延时加载//延时加载功能$(document) 查看详情

c#之面试小技巧(代码片段)

  1.定义常量最好使用运行是常量就是readonly编译常量就是const1publicstaticreadonlyMyClassmyClass=newMyClass();2publicstaticreadonlystringuserName="张三";//3publicconststringuserPwd="1234";//数字和string效率高,灵活性低2.类型转换如果 查看详情