[frontend] 根据文字长度 自适应宽度 自适应高度+ Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick
CSS一行代码就可以解决第一个问题:
1.1 根据文字长度,自适应标签宽度
解决方法:把width的设置删掉,加一行代码 display:table;
.tag-footdetail{
/*width: 300px;*/
height: 40px;
font-size: 1.5rem;
line-height: 40px;
text-align: center;
border-radius: 15px;
border: 1px solid #D2B991;
float: left;
margin-right: 30px;
margin-bottom: 10px;
background-color: #D2B991;
color: black;
display:table;
}
1.2 根据文字长度,自适应标签高度
CSS中
height:auto;
display:inline-block;
2.Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick
解决方法:
1)注意引用juery是否有错 对应的<script>行代码请认真检查
2)这其实是个很简单的问题,主要是注意xxx是否是个字符串,要不要加引号。
以下为例,value.id和value.name 都是需要加' '的,加上之后可以解决这个问题。
function renderFootData(data) {
$.each(data.result, function(index, value) {
var html = '<div class="tag" style="font-size:28px;" onclick="getfootid(\''+value.id+'\',\''+value.name+'\');">'
+ value.name
+ '</div>';
$("#foot-data-list").append($(html));
});
}
[frontend] 根据文字长度 自适应宽度 自适应高度+ Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick的更多相关文章
- 基于jQuery自适应宽度跟高度可自定义焦点图
基于jQuery自适应宽度跟高度可自定义焦点图.这是一款带左右箭头,缩略小图切换的jQuery相册代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <section cl ...
- 黄聪:table自适应宽度和高度
自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } 自 ...
- UIWebView获得内容的高 高度自适应 宽度自适应
UIWebView获得内容的高-作出自适应高的UIWebView- (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *height ...
- 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)
这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...
- 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度,即dataGridView根据数据自适应大小
上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...
- css和css3弹性盒模型实现元素宽度(高度)自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- 纯CSS实现Div高度根据自适应宽度(百分百调整)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS学习笔记(6)--浮动,三列布局,高度宽度自适应
百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...
- EasyUI设置Layout自适应浏览器宽度和高度
//设置自适应浏览器宽度和高度 function setLayoutHeight() { var height = $(window).height() - 20; $("#main_lay ...
随机推荐
- [LeetCode]Valid Sudoku解题记录
这道题考查对二维数组的处理,哈希表. 1.最自然的方法就是分别看每一个数是否符合三个规则.所以就须要对应的数据结构来 记录这些信息,判定是否存在.显然最先想到用哈希表. 2.学会把问题抽象成一个个的子 ...
- 笔记本光驱位换SSD固态硬盘之硬盘格式化
笔记本光驱位换SSD固态硬盘之硬盘格式化 系列文章: ThinkPad E430c加装内存和SSD固态硬盘 笔记本光驱位换SSD固态硬盘之Ghost克隆原来的系统到SSD固态硬盘分区 概述 加装SSD ...
- 可编辑ztree节点的增删改功能图标控制---已解决
每文一语:休倚时来势,提防运去时 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEd ...
- java电影站点开发经验3
上次讲到了.站点有资源了.可是必需要点缀下站点,要不光有资源比較空的.最開始就是想到了给资源加入评论功能的.然后自己就向开发个评论功能. 可是由于时间问题,并且本人也比較懒,就想在网上找找解决方式.嘻 ...
- Makefile 文件怎么写
跟我一起写Makefile:MakeFile介绍 Makefile 使用总结 1. make 命令与 Makefile 文件 在 Linux 平台,执行 make 命令时,会在当前目录下寻找 Make ...
- bzoj3673 & bzoj3674 & 洛谷P3402 可持久化并查集
题目:bzoj3673:https://www.lydsy.com/JudgeOnline/problem.php?id=3673 bzoj3674:https://www.lydsy.com/Jud ...
- springboot+webmagic实现java爬虫jdbc及mysql
前段时间需要爬取网页上的信息,自己对于爬虫没有任何了解,就了解了一下webmagic,写了个简单的爬虫. 一.首先介绍一下webmagic: webmagic采用完全模块化的设计,功能覆盖整个爬虫的生 ...
- 机器学习——Day 2 简单线性回归
写在开头 由于某些原因开始了机器学习,为了更好的理解和深入的思考(记录)所以开始写博客. 学习教程来源于github的Avik-Jain的100-Days-Of-MLCode 英文版:https:// ...
- 使用ZeppelinHub来存储和展示ZeppelinNoteBook
0.序 说实在的这个功能太赞了 在一开始接触的时候不知道有这个功能,我尝试做一下配置,发现非常的棒. 棒的原因有两点: 可以在随时随地有互联网的地方访问自己的ZeppelinHub来查看Zeppeli ...
- A - Petya and Strings
Problem description Little Petya loves presents. His mum bought him two strings of the same size for ...