[{"data":1,"prerenderedAt":38},["ShallowReactive",2],{"site-info":3,"post-tech-1831":7},{"name":4,"description":5,"url":6},"アイ・エル・アール","フリーランスWEB制作","https:\u002F\u002Filr.jp\u002Fwp\u002F",{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":14,"thumbnail":15,"thumb":15,"tag":16,"slug":25,"excerpt":26,"content":27,"simple_css":28,"adjacent":29},1831,"JavaScriptで擬似要素を操作する","tech","Tech Blog","\u002Ftech\u002F1831\u002F","2023.08.07","2023.08.08","\u002Fuploads\u002F2023\u002F08\u002Fimg_before_after.webp",[17,21],{"name":18,"slug":19,"url":20},"JavaScript","javascript","\u002Ftag\u002Fjavascript\u002F",{"name":22,"slug":23,"url":24},"擬似要素","%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0","\u002Ftag\u002F%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0\u002F","javascript%e3%81%a7%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%82%92%e6%93%8d%e4%bd%9c%e3%81%99%e3%82%8b","概要 JavaScriptで擬似要素(:before、:after)を操作します。 取得 HTML CSS JavaScript 変更 JavaScript","\n\u003Ch2 class=\"wp-block-heading\">概要\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">JavaScriptで擬似要素(:before、:after)を操作します。\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">取得\u003C\u002Fh2>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">HTML\u003C\u002Fh3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-html\" data-lang=\"HTML\">\u003Ccode><div class="contentText">\n  テキスト\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">CSS\u003C\u002Fh3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-css\" data-lang=\"CSS\">\u003Ccode>.contentText:before{\n   content: "コンテント";\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">JavaScript\u003C\u002Fh3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>let $text = document.querySelector('.contentText');\nlet before = window.getComputedStyle($text, '::before');\nconsole.log(before.getPropertyValue('content'));\n\u002F\u002F コンテント\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">変更\u003C\u002Fh2>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">JavaScript\u003C\u002Fh3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>let sheets = document.styleSheets\nlet sheet = sheets[sheets.length - 1];\n\n\u002F\u002Fスタイルルールの追加\nsheet.insertRule(\n  '.contentText::before { content: "コンテント２" }',\n  sheet.cssRules.length\n);\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n","",{"next":30,"previous":34},{"ID":31,"title":32,"post_type":10,"date":33},1895,"SVG内の要素にfilterを適応させる","2023.11.16",{"ID":35,"title":36,"post_type":10,"date":37},1827,"2点間の緯度・経度の距離を求める","2023.08.06",1780554991208]