表格中等宽单元格td之---获取节点下字符串的宽度

table-layout:fixed ;

 1     function getStrWidth(elementClass){//获取传入节点的宽度
 2         /* 参数为要获取内容宽度的节点名字（字符串） */
 3 
 4         var elementsArr = [];
 5         var elefontSizeArr = [];
 6         var curElements =     
 7      document.getElementsByClassName(elementClass);
 8 
 9         for (var i = 0; i < curElements.length; i++) {
10 
11           var eleWidth = curElements[i].innerHTML;
12           var eleFontSize = getCssValue(curElements[i],‘fontSize‘).slice(0,-2);
13 
14           elefontSizeArr.push(Number(eleFontSize));//每个节点内容的fontSize
15           elementsArr.push(Number(eleWidth));
16         }
17         return getMaxWidth(elementsArr,elefontSizeArr);
18         
19       }
20 
21        function getMaxWidth(arr,elefontSizeArr){//把得到的字符串数组拆分成 算str的clientWidth 取最大值返回
22 
23         var newArr = [];
24         for (var i = 0; i < arr.length; i++) {
25           var transArr = arr[i].toString().split(‘‘);
26           newArr.push(transArr);
27         }
28 
29         var subArr = [];
30 
31         for (var i = 0; i < newArr.length; i++) {
32           var width = 0;
33           for (var j = 0; j < newArr[i].length; j++) {
34 
35             getStrClientWidth(newArr[i][j], elefontSizeArr[i]);
36             width += getStrClientWidth(newArr[i][j], elefontSizeArr[i]);
37           }
38           subArr.push(width);
39         }
40 
41         return Math.max(...subArr);
42 
43       }
44       function getStrClientWidth(item, fontSize){//一个字符的宽度赋值判断
45         /*.
46           规定：
47           数字、小数点、小写字母为一类 (宽度一致)
48           大写字母为一类 (宽度一致)
49           其他为一类 (宽度一致)
50          */
51      
52         var numArr = [‘0‘,‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘,‘9‘,‘.‘];
53 
54         var lowerCaseArr = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘,‘i‘,‘j‘,‘k‘,‘l‘,‘m‘,‘n‘,‘o‘,‘p‘,‘q‘,‘r‘,‘s‘,‘t‘,‘u‘,‘v‘,‘w‘,‘x‘,‘y‘,‘z‘];
55 
56         var upperCaseArr = [‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘,‘G‘,‘H‘,‘I‘,‘J‘,‘K‘,‘L‘,‘M‘,‘N‘,‘O‘,‘P‘,‘Q‘,‘R‘,‘S‘,‘T‘,‘U‘,‘V‘,‘W‘,‘X‘,‘Y‘,‘Z‘];
57 
58         if (numArr.includes(item) || lowerCaseArr.includes(item)) {
59           return fontSize / 2;
60 
61         } else if (numArr.includes(item)) {
62           return fontSize / 2 + 2 * (fontSize / 12);
63 
64         } else {
65           return fontSize;
66 
67         }
68 
69       }
70       function getCssValue(element, propertyName) {//获取节点属性
71         return element.currentStyle ? element.currentStyle[propertyName] : document.defaultView.getComputedStyle(element, false)[propertyName];
72       }
73 
74 
75        console.log(getStrWidth(‘equal-width-ele‘)) // 得到了经过对比之后的所有class为‘equal-width-ele‘的节点的最大宽度