回答編集履歴
4
余計なセミコロンを削除
test
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
|
|
33
33
|
$('.' + get_line_height).remove();
|
|
34
34
|
|
|
35
|
-
$('.' + get_line_height_br).remove();
|
|
35
|
+
$('.' + get_line_height_br).remove();
|
|
36
36
|
|
|
37
37
|
}
|
|
38
38
|
|
3
javascriptの変数get_line_heightが行をまたぐ場合に起きるバグを、brタグを直前に入れることで修正
test
CHANGED
|
@@ -2,42 +2,46 @@
|
|
|
2
2
|
|
|
3
3
|
それをline-heightとbackground-sizeの高さに適用することにしました。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
```javascript
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Math.trunc = Math.trunc || function (x) {
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
return x < 0 ? Math.ceil(x) : Math.floor(x);
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
}
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
function underline() {
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
var target = $('.parent');
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
var get_line_height = 'get_line_height';
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
var get_line_height_br = 'get_line_height_br';
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
var set_line_height = 1.5;
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
target.append('<br class="' + get_line_height_br + '"><span style="line-height:1em;" class="' + get_line_height + '">１行の高さ取得用</span>');
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
//↓IE11用にcalc()で囲む
|
|
26
26
|
|
|
27
|
-
t
|
|
27
|
+
var height = "calc( " + Math.trunc($('.' + get_line_height).outerHeight() * set_line_height) + 'px )';
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
target.css("background-size", "100% " + height);
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
target.css("line-height", height);
|
|
32
32
|
|
|
33
|
+
$('.' + get_line_height).remove();
|
|
34
|
+
|
|
35
|
+
$('.' + get_line_height_br).remove();;
|
|
36
|
+
|
|
33
|
-
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
underline();
|
|
40
|
+
|
|
41
|
+
$(window).resize(function () {
|
|
34
42
|
|
|
35
43
|
underline();
|
|
36
44
|
|
|
37
|
-
|
|
45
|
+
});
|
|
38
46
|
|
|
39
|
-
underline();
|
|
40
|
-
|
|
41
|
-
|
|
47
|
+
```
|
|
42
|
-
|
|
43
|
-
</script>
|
2
特定のウィンドウ幅でずれるバグを修正(小数点切り捨てを実装)
test
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
それをline-heightとbackground-sizeの高さに適用することにしました。
|
|
4
4
|
|
|
5
5
|
<script>
|
|
6
|
+
|
|
7
|
+
Math.trunc = Math.trunc || function (x) {
|
|
8
|
+
|
|
9
|
+
return x < 0 ? Math.ceil(x) : Math.floor(x);
|
|
10
|
+
|
|
11
|
+
}
|
|
6
12
|
|
|
7
13
|
function underline() {
|
|
8
14
|
|
|
@@ -10,23 +16,23 @@
|
|
|
10
16
|
|
|
11
17
|
var get_line_height = 'get_line_height';
|
|
12
18
|
|
|
13
|
-
var
|
|
19
|
+
var set_line_height = 1.5;
|
|
14
20
|
|
|
15
21
|
target.append('<span class="' + get_line_height + '">１行の高さ取得用</span>');
|
|
16
22
|
|
|
23
|
+
//↓IE11用にcalc()で囲む
|
|
24
|
+
|
|
17
|
-
var height = "calc( " + $('.' + get_line_height).outerHeight()
|
|
25
|
+
var height = "calc( " + Math.trunc( $('.' + get_line_height).outerHeight() * set_line_height ) + 'px )';
|
|
18
26
|
|
|
19
27
|
target.css("background-size", "100% " + height);
|
|
20
28
|
|
|
21
|
-
target.css("line-height",height);
|
|
29
|
+
target.css("line-height", height);
|
|
22
30
|
|
|
23
31
|
$('.' + get_line_height).remove();
|
|
24
32
|
|
|
25
33
|
}
|
|
26
34
|
|
|
27
35
|
underline();
|
|
28
|
-
|
|
29
|
-
|
|
30
36
|
|
|
31
37
|
$(window).resize(function () {
|
|
32
38
|
|
1
ソースに余計な文字が入っていた
test
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
target.css("background-size", "100% " + height);
|
|
20
20
|
|
|
21
|
-
target.css("line-height",
|
|
21
|
+
target.css("line-height",height);
|
|
22
22
|
|
|
23
23
|
$('.' + get_line_height).remove();
|
|
24
24
|
|