質問するログイン新規登録

回答編集履歴

2

調整

2021/12/09 04:08

投稿

yambejp
yambejp

スコア118098

answer CHANGED
@@ -11,4 +11,22 @@
11
11
   <span class="price">¥1,080</span>
12
12
   <span>(税込)</span>
13
13
  </p>
14
+ ```
15
+
16
+ ※priceクラスのついてない部分を非表示するjs
17
+ ```javascript
18
+ <script>
19
+ window.addEventListener('DOMContentLoaded', ()=>{
20
+ [...document.querySelector('p').childNodes].filter(x=>x.nodeType==3).forEach(x=>{
21
+ const s=document.createElement('span');
22
+ s.setAttribute('hidden','');
23
+ x.parentNode.insertBefore(s,x);
24
+ s.appendChild(x);
25
+ });
26
+ });
27
+ </script>
28
+ <p>
29
+  <span class="price">¥1,080</span>
30
+  (税込)
31
+ </p>
14
32
  ```

1

chousei

2021/12/09 04:08

投稿

yambejp
yambejp

スコア118098

answer CHANGED
@@ -1,2 +1,14 @@
1
- 非表示とは透明でいいのか、それとも表示領域をふくめて非表示なのかによります
2
- 前者は簡単ですが、後者の場合「(税込)」の部分もspanなどで囲む必要がありそうです
1
+ 「(税込)」の部分もspanなどで囲めばできそうですが、HTMLをいじるのはNGですか?
2
+ JSからHTMLの構造を変えてもよいのでしょうか?
3
+
4
+ ```HTML
5
+ <style>
6
+ p :not(.price){
7
+ display:none;
8
+ }
9
+ </style>
10
+ <p>
11
+  <span class="price">¥1,080</span>
12
+  <span>(税込)</span>
13
+ </p>
14
+ ```