C# WebBrowser上のCSS情報の取得、設定方法について

C# Windowsアプリケーション WebBeowser上のcss情報の取得、設定方法について

WebBrowser上のcss情報の取得、設定方法がわかりません。

ボタンを押したら図形を回転させる、みたいな事がしたいのですが、
C#上で角度の更新をさせたいです。（transformの再設定）

環境：C# WinForms
WebBrowser.Nabigateで上記ボタンと図形がのったhtmlを表示させてます。

HtmlElement.GetAttributeでは"Value"や"ClassName"などしか取れないですし、
以下サイトが近いかな？と思っていますがいまいちわかりません。

スタイルの制御

よろしくおねがいします。

補足

説明不足でした。もう一度補足させて下さい。

WebBrowser.Navigateで表示しているhtmlファイルの内容についてですが、
CSSで飾り付けしたタコメータを表示しています。
CSSは外部ファイルで用意しており、HTML上でlinkで紐づけている状態です。
onchangeイベントか何かでタコメータの針の"transform"をC#上で更新させたいです。

なので現状、処理的にやりたい事は
「HTMLに紐づいてる以下testMeter.cssコード内"transform"をC#上で取得、再設定」なんですが
以下TxtOnChange関数の中になんて書けば実現できるかわかりません！！教えてください！！

C#
1namespace 画面てすと
2{
3    public partial class Form3 : Form
4    {
5        public Form3()
6        {
7            InitializeComponent();
8        }
9
10        private void Form3_Load(object sender, EventArgs e)
11        {
12            this.webBrowser1.Navigate(@"C～～～～\index.html");
13        }
14
15        private void WebBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
16        {
17            HtmlDocument document = this.webBrowser1.Document;
18
19            HtmlElement element = document.GetElementById("txt1");
20            if (element != null)
21            {
22                element.AttachEventHandler("onchange", TxtOnChange);
23            }
24        }
25
26　　　　 //　テキストボックス　値変更イベント
27        private void TxtOnChange(object sender, EventArgs e)
28        {
29
30            HtmlDocument document = this.webBrowser1.Document;
31
32　　　　　　 // 画面左上テキストボックスの値取得
33            string num1 = document.GetElementById("txt1").GetAttribute("value");
34　　　　　
35            //--------------------------------------------------------------//
36            // ここで CSS lineクラス内の"transform"のdeg値をnum1に変更したい //
37            //--------------------------------------------------------------//
38
39        }
40    }
41

webBrowserに載せてるhtml

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<link rel=" stylesheet" href="testMeter.css">
6	<title>test</title>
7</head>
8<body>
9    <form action="#" method="post">
10
11        <p>
12            数値1：<br>
13            <input id="txt1" type="text" name="name">
14        </p>
15
16    </form>
17
18    <div class="container">
19        <div id="tachometer">
20            <div class="ii">
21                <div><b><span class="num_1">0</span></b></div>
22                <div><b></b></div>
23                <div><b><span class="num_2">1</span></b></div>
24                <div><b></b></div>
25                <div><b><span class="num_3">2</span></b></div>
26                <div><b></b></div>
27                <div><b><span class="num_4">3</span></b></div>
28                <div><b></b></div>
29                <div><b><span class="num_5">4</span></b></div>
30                <div><b></b></div>
31                <div><b><span class="num_6">5</span></b></div>
32                <div><b></b></div>
33                <div><b><span class="num_7">6</span></b></div>
34                <div><b></b></div>
35                <div><b><span class="num_8">7</span></b></div>
36                <div><b></b></div>
37                <div><b><span class="num_9">8</span></b></div>
38            </div>
39            <div id="redline"></div>
40            <div id="meter" class="line"></div>
41            <div class="pin"><div class="inner"></div></div>
42        </div>
43    </div>
44</body>
45</html>

"testMeter.css" のlineクラスのみ

CSS
1.line {
2    background: #F14134;
3    background-image: linear-gradient(to bottom, #F14134, #343536);
4    height: 0;
5    left: 50%;
6    position: absolute;
7    top: 50%;
8    width: 0;
9    transform-origin: 50% 100%;
10    margin: -285px -8px 0;
11    padding: 285px 8px 0;
12    z-index: 2;
13    border-radius: 50% 50% 0 0;
14    transform: rotate(-95deg);
15**}

gentaro

2020/10/27 07:00 編集

C#の質問をする時はどのプロジェクトテンプレートを使っているのかを書いてください。 WinFormsだとは思いますが、WPFやUWPでない事を回答者に判断させるような手間をとらせるのではなく、あなたがちゃんと情報を出すべきです。ガイドラインを一読されることをお勧めします。 https://teratail.com/help/question-tips

yofi6617

2020/10/27 07:06

すいません追記しました。

退会済みユーザー

2020/10/27 07:23

参考にしているサイトは url を書くだけでなくリンクを張ってください。

退会済みユーザー

2020/10/27 08:53

参考にしているサイトには十分な情報が提供されているようです。それを見ても分からないから答えを書いてくれということですと、丸投げということになってしまうと思うのですが。コードを書いて、どこで躓いていて、何が分かれば解決するかを、書いたコードをアップして説明できませんか？

退会済みユーザー

2020/10/28 02:45

WebBrowser.Nabigate のスペルが違うのではないですか？「タコメータの針の"transform"」とか言われても何のことやらさっぱり分かりません。先にも書きましたが、コードを書いて、どこで躓いていて、何が分かれば解決するかを、書いたコードをアップして説明できませんか？　それだけを見れば 100% あなたのやりたいことが分かるように書いていただければと思います。

退会済みユーザー

2020/10/28 06:00

> ここで CSS lineクラス内の"transform"のdeg値をnum1に変更したい記事の「style属性 / インラインCSS (Inline CSS)」に書いてあることとか、試してみませんか？　それでダメだと自分は分かりません。

yofi6617

2020/10/28 07:08

下記のように記述した限りでは出来ませんでした。　　　　HtmlElement element = document.GetElementById("meter"); element = document.CreateElement("line"); element.Style = "transform: rotate(120deg)"; ご検討有難うございました。お手数お掛け致しました。

退会済みユーザー

2020/10/28 07:53

element = document.CreateElement("line"); ではダメかと。element は <div id="meter" class="line"></div> でなければならないのでは？

yofi6617

2020/10/28 08:17

できました、、、、、ほんとにお手数お掛け致しました、、、

行動規範の内容に同意します

回答1件

自己解決

以下、コードで実現できました。
ご検討頂いた皆様大変お手数お掛け致しました。

C#
1        private void TxtOnChange(object sender, EventArgs e)
2        {
3            HtmlDocument document = this.webBrowser1.Document;
4            HtmlElement element = document.GetElementById("meter");
5
6            string num1 = document.GetElementById("txt1").GetAttribute("value");
7
8            element.Style = "transform: rotate(" + num1 + "deg)";
9        }