> For the complete documentation index, see [llms.txt](https://hogosuru.v-ip.fr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hogosuru.v-ip.fr/guides/create-html-entities-and-manipulating-dom/modify-css-and-attributes.md).

# Modify CSS and attributes

You can modify attributes and elements, thanks to web api manipulation function.

I will not cover all the possibilities but give you some simple examples.

## Example with Bulma.io

Bulma is an amazing CSS framework focused only on CSS.

I will show you how you can use easly with hogosuru

### First Step: import the css  

There are a lots of way to do this. Usually, you import it in the same time you load the wasm.

I will use another method and show you how you can load it dynamically :thumbsup:

 

```
func main() {
	hogosuru.Init()

	// we get the current document
	if doc, err := document.New(); hogosuru.AssertErr(err) {

		//we got the head
		if head, err := doc.Head(); hogosuru.AssertErr(err) {

			if link, err := htmllinkelement.New(doc); hogosuru.AssertErr(err) {

				link.SetRel("stylesheet")
				link.SetHref("https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css")
				head.AppendChild(link.Node)

			}

		}

		if body, err := doc.Body(); hogosuru.AssertErr(err) {
			//lets create some button design with bulma

			if div, err := htmldivelement.New(doc); hogosuru.AssertErr(err) {

				if list, err := div.ClassList(); hogosuru.AssertErr(err) {
					list.Add("buttons")

				}

				if buttonprimary, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {

					buttonprimary.SetTextContent("Primary")
					//we get the class list attribute
					if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {
						list.Add("button")
						list.Add("is-primary")
					}

					buttonprimary.OnClick(func(e event.Event) {

						if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {

							list.Remove("is-primary")
							list.Add("is-warning")
						}
					})

					div.Append(buttonprimary.Element)
				}

				if buttondanger, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {

					buttondanger.SetTextContent("Danger")
					//we get the class list attribute
					if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {
						list.Add("button")
						list.Add("is-danger")
					}

					buttondanger.OnClick(func(e event.Event) {

						if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {

							list.Remove("is-danger")
							list.Add("is-info")
						}
					})
					div.Append(buttondanger.Element)
				}

				body.Append(div.Element)

			}

		}

	}

	ch := make(chan struct{})
	<-ch

}
```

## Let's take a closer look at the code

First we get the head of the document, we create an htmllink with the ref to the bulma css and attach to the head&#x20;

```
		if head, err := doc.Head(); hogosuru.AssertErr(err) {

			if link, err := htmllinkelement.New(doc); hogosuru.AssertErr(err) {

				link.SetRel("stylesheet")
				link.SetHref("https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css")
				head.AppendChild(link.Node)

			}

		}
```

Follow to the bulma documentation , we create an html code like this:

```
<div class="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-danger">Danger</button>
</div>
```

We dynamically create the components, assign the class like the html above.\
When click on the Primary button, we change their class for warning.\
When click on the Danger button, we change their class for info.

```
if body, err := doc.Body(); hogosuru.AssertErr(err) {
	//lets create some button design with bulma

	if div, err := htmldivelement.New(doc); hogosuru.AssertErr(err) {

		if list, err := div.ClassList(); hogosuru.AssertErr(err) {
			list.Add("buttons")

		}

		if buttonprimary, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {

			buttonprimary.SetTextContent("Primary")
			//we get the class list attribute
			if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {
				list.Add("button")
				list.Add("is-primary")
			}

			buttonprimary.OnClick(func(e event.Event) {

				if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {

					list.Remove("is-primary")
					list.Add("is-warning")
				}
			})

			div.Append(buttonprimary.Element)
		}

		if buttondanger, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {

			buttondanger.SetTextContent("Danger")
			//we get the class list attribute
			if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {
				list.Add("button")
				list.Add("is-danger")
			}

			buttondanger.OnClick(func(e event.Event) {

				if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {

					list.Remove("is-danger")
					list.Add("is-info")
				}
			})
			div.Append(buttondanger.Element)
		}

		body.Append(div.Element)

	}

}
```

![](/files/5d3jc1e4ZuHlwEWgEk5N)

Click on 2 buttons

![](/files/r7AYG8FlPCuyJ5vMgqT3)

### How to hide a component?

We can hide components with the style directive "Display:None".

Style can be changed with the SetProperties and RemoveProperties of the [CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)

To hide a button:

```
if css,err:=buttondanger.Style();hogosuru.AssertErr(err) {
css.SetProperty("display", "none")
}
```

### Access to attributes

You can Modify/Set the attributes of elements with the corresponding method available on [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)&#x20;

If you want create an input checkbox element,  you need write

```
if input, err := htmlinputelement.New(d);hogosuru.AssertErr(err) {
input.SetAttribute("type", "checkbox")
}
```